feat: sync 3d canvas updates and block trackpad history swipe

2026-03-04 01:59:23 +08:00 · 2026-03-04 01:59:23 +08:00 · bff8ffa100
commit bff8ffa100
parent 0c44d498d1
3 changed files with 759 additions and 659 deletions
--- a/app/canvas/[id]/model3d/page.tsx
+++ b/app/canvas/[id]/model3d/page.tsx
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@ -564,6 +564,31 @@ export default function CanvasEditorPage({ params }: PageProps) {
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [handleSave, nodes, redo, selectNodes, selectedNodeIds, setTool, undo]);

+  useEffect(() => {
+    const html = document.documentElement;
+    const body = document.body;
+    const prevHtmlOverscrollX = html.style.overscrollBehaviorX;
+    const prevBodyOverscrollX = body.style.overscrollBehaviorX;
+
+    html.style.overscrollBehaviorX = "none";
+    body.style.overscrollBehaviorX = "none";
+
+    const preventHistorySwipe = (event: WheelEvent) => {
+      if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    };
+
+    window.addEventListener("wheel", preventHistorySwipe, { passive: false });
+
+    return () => {
+      window.removeEventListener("wheel", preventHistorySwipe);
+      html.style.overscrollBehaviorX = prevHtmlOverscrollX;
+      body.style.overscrollBehaviorX = prevBodyOverscrollX;
+    };
+  }, []);
+
  if (isLoading) {
    return (
      <div className="h-full flex items-center justify-center bg-muted/30">
--- a/components/canvas/model3d/Model3DViewer.tsx
+++ b/components/canvas/model3d/Model3DViewer.tsx
@ -1,26 +1,33 @@
 "use client";

-import { Environment, Grid, OrbitControls, useGLTF } from "@react-three/drei";
+/* eslint-disable @next/next/no-img-element */
+import {
+  ContactShadows,
+  Environment,
+  Grid,
+  OrbitControls,
+  useGLTF,
+} from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
-import { AlertCircle, Box, ExternalLink } from "lucide-react";
+import { AlertCircle, Box, ExternalLink, Loader2 } from "lucide-react";
 import React, { Suspense, useEffect, useMemo } from "react";
 import type { Mesh, Object3D } from "three";
 import { Button } from "@/components/ui/button";

-export interface Model3DLayer {
+export type Model3DLayer = {
  id: string;
  name: string;
  triangles: number;
  vertices: number;
-}
+};

-export interface Model3DStats {
+export type Model3DStats = {
  triangles: number;
  vertices: number;
  meshCount: number;
-}
+};

-export interface Model3DViewerSettings {
+export type Model3DViewerSettings = {
  envPreset:
    | "city"
    | "sunset"
@ -36,17 +43,18 @@ export interface Model3DViewerSettings {
  autoRotate: boolean;
  showGrid: boolean;
  wireframe: boolean;
-}
+};

-interface Model3DViewerProps {
+type Model3DViewerProps = {
  modelUrl?: string | null;
  previewImageUrl?: string | null;
  settings: Model3DViewerSettings;
  layerVisibility?: Record<string, boolean>;
  onLayersChange?: (layers: Model3DLayer[]) => void;
  onStatsChange?: (stats: Model3DStats) => void;
-}
+};

+// eslint-disable-next-line
 class ViewerErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { hasError: boolean }
@ -183,19 +191,26 @@ function isGlbOrGltf(url?: string | null) {

 function EmptyState({ previewImageUrl }: { previewImageUrl?: string | null }) {
  return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-zinc-950/50 p-4">
      {previewImageUrl ? (
-        <img
-          alt="3D 预览"
-          className="max-h-[65%] max-w-full rounded-lg border object-contain"
-          src={previewImageUrl}
-        />
+        <div className="relative aspect-square w-64 overflow-hidden rounded-xl border border-white/10 bg-zinc-900/50 shadow-2xl">
+          <img
+            alt="3D 预览"
+            className="h-full w-full object-cover opacity-50 transition-opacity hover:opacity-100"
+            src={previewImageUrl}
+          />
+          <div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[1px]">
+            <Loader2 className="h-8 w-8 animate-spin text-white/50" />
+          </div>
+        </div>
      ) : (
-        <Box className="h-14 w-14 text-muted-foreground/60" />
+        <div className="flex flex-col items-center gap-4 text-zinc-500">
+          <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-zinc-900/50 shadow-inner">
+            <Box className="h-10 w-10 opacity-20" />
+          </div>
+          <p className="font-medium text-sm">准备生成 3D 资产</p>
+        </div>
      )}
-      <p className="text-muted-foreground text-sm">
-        生成完成后可在此区域预览 3D 资产
-      </p>
    </div>
  );
 }
@ -214,12 +229,14 @@ export function Model3DViewer({

  if (!isGlbOrGltf(modelUrl)) {
    return (
-      <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
-        <AlertCircle className="h-8 w-8 text-amber-500" />
-        <p className="text-muted-foreground text-sm">
-          当前文件格式不支持内嵌预览，请在新窗口打开
-        </p>
-        <Button asChild className="gap-2" variant="secondary">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
+        <AlertCircle className="h-8 w-8 text-yellow-500/50" />
+        <p className="text-sm">当前文件格式不支持内嵌预览，请在新窗口打开</p>
+        <Button
+          asChild
+          className="gap-2 border-white/10 text-zinc-300 hover:bg-white/5"
+          variant="outline"
+        >
          <a href={modelUrl} rel="noreferrer" target="_blank">
            <ExternalLink className="h-4 w-4" />
            打开3D文件
@ -232,12 +249,14 @@ export function Model3DViewer({
  return (
    <ViewerErrorBoundary
      fallback={
-        <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
-          <AlertCircle className="h-8 w-8 text-destructive" />
-          <p className="text-muted-foreground text-sm">
-            3D 预览加载失败，请尝试在新窗口打开
-          </p>
-          <Button asChild className="gap-2" variant="secondary">
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
+          <AlertCircle className="h-8 w-8 text-red-500/50" />
+          <p className="text-sm">3D 预览加载失败，请尝试在新窗口打开</p>
+          <Button
+            asChild
+            className="gap-2 border-white/10 text-zinc-300 hover:bg-white/5"
+            variant="outline"
+          >
            <a href={modelUrl} rel="noreferrer" target="_blank">
              <ExternalLink className="h-4 w-4" />
              打开3D文件
@ -246,39 +265,55 @@ export function Model3DViewer({
        </div>
      }
    >
-      <Canvas camera={{ position: [2, 1.5, 2], fov: 45 }}>
+      <Canvas
+        camera={{ position: [2, 1.5, 2], fov: 45 }}
+        className="bg-gradient-to-b from-zinc-900 to-zinc-950"
+      >
        <ambientLight intensity={0.5 * settings.lightIntensity} />
        <directionalLight
          intensity={1.2 * settings.lightIntensity}
          position={[5, 8, 5]}
+          shadow-bias={-0.0001}
        />
+
        {settings.showGrid ? (
          <Grid
-            args={[12, 12]}
-            cellColor="#8c8c8c"
+            args={[20, 20]}
+            cellColor="#3f3f46"
            cellSize={0.5}
-            fadeDistance={40}
-            fadeStrength={1.5}
+            fadeDistance={30}
+            fadeStrength={1}
            position={[0, -0.01, 0]}
-            sectionColor="#525252"
+            sectionColor="#52525b"
            sectionSize={2}
          />
        ) : null}
+
        <Suspense
          fallback={
            <mesh>
-              <boxGeometry args={[0.6, 0.6, 0.6]} />
-              <meshStandardMaterial color="#94a3b8" wireframe />
+              <boxGeometry args={[0.5, 0.5, 0.5]} />
+              <meshStandardMaterial color="#27272a" wireframe />
            </mesh>
          }
        >
-          <ModelScene
-            layerVisibility={layerVisibility}
-            onLayersChange={onLayersChange}
-            onStatsChange={onStatsChange}
-            settings={settings}
-            url={modelUrl}
-          />
+          <group position={[0, 0, 0]}>
+            <ModelScene
+              layerVisibility={layerVisibility}
+              onLayersChange={onLayersChange}
+              onStatsChange={onStatsChange}
+              settings={settings}
+              url={modelUrl}
+            />
+            <ContactShadows
+              blur={2}
+              color="#000000"
+              far={4}
+              opacity={0.4}
+              resolution={256}
+              scale={10}
+            />
+          </group>
          <Environment preset={settings.envPreset} />
        </Suspense>
        <OrbitControls
@ -286,6 +321,9 @@ export function Model3DViewer({
          enablePan
          enableRotate
          enableZoom
+          makeDefault
+          maxPolarAngle={Math.PI / 1.75}
+          minPolarAngle={0}
        />
      </Canvas>
    </ViewerErrorBoundary>