update: add a gltf viewer

2026-04-03 11:32:56 +02:00
parent a44cd5dab3
commit 7ce3d61110
6 changed files with 924 additions and 21 deletions
@@ -0,0 +1,47 @@
+'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>
+  )
+}
+
+interface ModelViewerProps {
+  url: string
+  filename: string
+  size: string
+}
+
+export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
+  return (
+    <div className="w-full h-[450px] bg-black-800 border border-black-700 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}
+        </span>
+        <span className="text-xs text-gray-500 bg-black-900/60 px-2 py-1 rounded">
+          {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>
+    </div>
+  )
+}