fix: support gltf uploads with local preview

components/SceneViewer.tsx

@@ -2,22 +2,38 @@
 
 import { Suspense } from 'react'
 import { Canvas } from '@react-three/fiber'
-import { Stage, OrbitControls, useGLTF } from '@react-three/drei'
+import { Stage, OrbitControls } from '@react-three/drei'
+import { useLoader } from '@react-three/fiber'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+
+function resolveAssetUrl(requestedUrl: string, assetUrls: Record<string, string>) {
+  if (requestedUrl.startsWith('blob:') || requestedUrl.startsWith('data:')) {
+    return requestedUrl
+  }
+
+  const cleanUrl = decodeURIComponent(requestedUrl.split(/[?#]/)[0] || '')
+  const filename = cleanUrl.split(/[\\/]/).pop()?.toLowerCase()
+
+  return filename ? assetUrls[filename] || requestedUrl : requestedUrl
+}
+
+function Model({ url, assetUrls }: { url: string; assetUrls: Record<string, string> }) {
+  const { scene } = useLoader(GLTFLoader, url, (loader) => {
+    loader.manager.setURLModifier((requestedUrl) => resolveAssetUrl(requestedUrl, assetUrls))
+  })
 
-function Model({ url }: { url: string }) {
-  const { scene } = useGLTF(url)
   return <primitive object={scene} />
 }
 
-export default function SceneViewer({ url }: { url: string }) {
+export default function SceneViewer({ url, assetUrls }: { url: string; assetUrls: Record<string, string> }) {
   return (
     <Canvas dpr={[1, 2]} camera={{ fov: 50 }}>
       <Suspense fallback={null}>
         <Stage environment="city" intensity={0.6} adjustCamera={1.2}>
-          <Model url={url} />
+          <Model url={url} assetUrls={assetUrls} />
         </Stage>
       </Suspense>
       <OrbitControls makeDefault autoRotate autoRotateSpeed={0.5} />
     </Canvas>
   )
-}
+}