From 82dda143ebe785ebde0cffa1e828f0c307d0ef27 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 21 Apr 2026 01:07:08 +0800
Subject: [PATCH] fix: load 3d viewers on client

---
 app/canvas/[id]/model3d/page.tsx | 33 ++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/canvas/[id]/model3d/page.tsx b/app/canvas/[id]/model3d/page.tsx
index 2907ca422..c928de041 100644
--- a/app/canvas/[id]/model3d/page.tsx
+++ b/app/canvas/[id]/model3d/page.tsx
@@ -2,6 +2,7 @@
 
 import { formatDistanceToNow } from "date-fns";
 import { zhCN } from "date-fns/locale";
+import dynamic from "next/dynamic";
 import {
   ArrowLeft,
   Bone,
@@ -49,10 +50,8 @@ import useSWR from "swr";
 import {
   type Model3DLayer,
   type Model3DStats,
-  Model3DViewer,
   type Model3DViewerSettings,
 } from "@/components/canvas/model3d/Model3DViewer";
-import { World3DViewer } from "@/components/canvas/world3d/World3DViewer";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -115,6 +114,36 @@ import {
 } from "@/services/canvas";
 import { canvasSelectors, useCanvasStore } from "@/store/canvas";
 
+const Model3DViewer = dynamic(
+  () =>
+    import("@/components/canvas/model3d/Model3DViewer").then(
+      (module) => module.Model3DViewer
+    ),
+  {
+    loading: () => (
+      <div className="flex h-full w-full items-center justify-center text-sm text-zinc-500">
+        准备加载 3D 视图...
+      </div>
+    ),
+    ssr: false,
+  }
+);
+
+const World3DViewer = dynamic(
+  () =>
+    import("@/components/canvas/world3d/World3DViewer").then(
+      (module) => module.World3DViewer
+    ),
+  {
+    loading: () => (
+      <div className="flex h-full w-full items-center justify-center text-sm text-zinc-500">
+        准备加载 World 视图...
+      </div>
+    ),
+    ssr: false,
+  }
+);
+
 type GenerationMode = "text" | "image" | "multiview" | "batch";
 type WorkspaceMode = "model" | "world";
 type WorldGenerationMode = "text" | "image" | "multi-image" | "video";