update: fix packages

components/ModelViewer.tsx

@@ -1,21 +1,6 @@
 'use client'
 
-import { Suspense } from 'react'
-import { Canvas } from '@react-three/fiber'
-import { Stage, OrbitControls, useGLTF } from '@react-three/drei'
-
-function Model({ url }: { url: string }) {
-  const { scene } = useGLTF(url)
-  return <primitive object={scene} />
-}
-
-function Loader() {
-  return (
-    <div className="absolute inset-0 flex items-center justify-center">
-      <div className="w-6 h-6 border-2 border-gray-500 border-t-gray-300 rounded-full animate-spin" />
-    </div>
-  )
-}
+import { useEffect, useState } from 'react'
 
 interface ModelViewerProps {
   url: string
@@ -24,8 +9,28 @@ interface ModelViewerProps {
 }
 
 export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
+  const [Scene, setScene] = useState<React.ComponentType<{ url: string }> | null>(null)
+
+  useEffect(() => {
+    let cancel = false
+
+    import('./SceneViewer').then((mod) => {
+      if (!cancel) setScene(() => mod.default)
+    })
+
+    return () => { cancel = true }
+  }, [])
+
+  if (!Scene) {
+    return (
+      <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
+        <div className="w-6 h-6 border-2 border-gray-500 border-t-gray-300 rounded-full animate-spin" />
+      </div>
+    )
+  }
+
   return (
-    <div className="w-full h-[450px] bg-black-800 border border-black-700 rounded-xl overflow-hidden relative">
+    <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden relative">
       <div className="absolute top-3 left-3 z-10 flex items-center gap-2">
         <span className="text-xs text-gray-400 font-mono bg-black-900/60 px-2 py-1 rounded">
           {filename}
@@ -34,14 +39,7 @@ export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
           {size}
         </span>
       </div>
-      <Canvas shadows dpr={[1, 2]} camera={{ fov: 50 }}>
-        <Suspense fallback={null}>
-          <Stage environment="city" intensity={0.6} adjustCamera={1.2}>
-            <Model url={url} />
-          </Stage>
-        </Suspense>
-        <OrbitControls makeDefault autoRotate autoRotateSpeed={0.5} />
-      </Canvas>
+      <Scene url={url} />
     </div>
   )
 }