fix: support gltf uploads with local preview

components/ModelViewer.tsx

@@ -4,13 +4,14 @@ import { useEffect, useState } from 'react'
 
 interface ModelViewerProps {
   url: string
+  assetUrls: Record<string, string>
   filename: string
   size: string
 }
 
-export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
-  const canPreview = filename.toLowerCase().endsWith('.glb')
-  const [Scene, setScene] = useState<React.ComponentType<{ url: string }> | null>(null)
+export default function ModelViewer({ url, assetUrls, filename, size }: ModelViewerProps) {
+  const canPreview = filename.toLowerCase().endsWith('.gltf')
+  const [Scene, setScene] = useState<React.ComponentType<{ url: string; assetUrls: Record<string, string> }> | null>(null)
 
   useEffect(() => {
     if (!canPreview) return
@@ -28,7 +29,7 @@ export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
     return (
       <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
         <p className="text-sm text-gray-400 px-6 text-center">
-          La preview 3D locale est disponible uniquement pour les fichiers <span className="font-mono">.glb</span>.
+          La preview 3D locale n&apos;est pas disponible pour les dossiers <span className="font-mono">model.gltf</span> avec fichiers associes.
         </p>
       </div>
     )
@@ -52,7 +53,7 @@ export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
           {size}
         </span>
       </div>
-      <Scene url={url} />
+      <Scene url={url} assetUrls={assetUrls} />
     </div>
   )
 }

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>
   )
-}
+}

components/UploadZone.tsx

@@ -60,6 +60,12 @@ export default function UploadZone() {
   })
 
   const handleFolderSelected = (entry: FolderEntry) => {
+    entries.forEach((current) => {
+      const urls = new Set<string>()
+      if (current.modelUrl) urls.add(current.modelUrl)
+      Object.values(current.assetUrls || {}).forEach((url) => urls.add(url))
+      urls.forEach((url) => URL.revokeObjectURL(url))
+    })
     setGlobalError(null)
     setEntries([entry])
   }
@@ -78,12 +84,13 @@ export default function UploadZone() {
       {entries.length === 0 && (
         <p className="rounded-2xl border border-white/20 bg-black-800 px-4 py-3 text-xs text-gray-400 leading-relaxed text-center mb-3">
           Deposez un dossier complet contenant votre modele 3D nomme
-          {' '}<span className="font-mono text-gray-200">model.glb</span>
-          {' '}ainsi que toutes les textures necessaires.
-          {' '}Les textures peuvent etre en
+          {' '}<span className="font-mono text-gray-200">model.gltf</span>
+          {' '}ainsi que toutes les textures et fichiers binaires necessaires.
+          {' '}Les fichiers associes peuvent etre en
           {' '}<span className="font-mono text-gray-200">.png</span>,
           {' '}<span className="font-mono text-gray-200">.jpg</span>
-          {' '}ou <span className="font-mono text-gray-200">.webp</span>.
+          {' '}<span className="font-mono text-gray-200">.webp</span>
+          {' '}ou <span className="font-mono text-gray-200">.bin</span>.
           {' '}Utilisez un nom simple si la texture s&apos;applique au modele entier, et un nom detaille si elle correspond a une partie precise du modele,
           {' '}par exemple <span className="font-mono text-gray-200">color_porte.jpg</span>,
           {' '}<span className="font-mono text-gray-200">roughness_tuyaux.png</span>,

components/upload/FolderCard.tsx

@@ -102,6 +102,7 @@ export default function FolderCard({ entry, index, onToggleViewer, onRemove }: F
         >
           <ModelViewer
             url={entry.modelUrl}
+            assetUrls={entry.assetUrls || {}}
             filename={entry.modelFile.name}
             size={formatBytes(entry.modelFile.size)}
           />

components/upload/FolderDropzone.tsx

@@ -3,6 +3,19 @@ import type { FolderEntry } from '@/lib/client-types'
 import { validateFolder } from '@/lib/validate-folder'
 import { FolderIcon } from '@/components/ui/icons'
 
+function buildAssetUrls(model: File, supportFiles: File[]) {
+  const assetUrls: Record<string, string> = {}
+  const modelUrl = URL.createObjectURL(model)
+
+  assetUrls[model.name.toLowerCase()] = modelUrl
+
+  for (const file of supportFiles) {
+    assetUrls[file.name.toLowerCase()] = URL.createObjectURL(file)
+  }
+
+  return { modelUrl, assetUrls }
+}
+
 function readDroppedFile(entry: FileSystemFileEntry) {
   return new Promise<File>((resolve, reject) => {
     entry.file(resolve, reject)
@@ -60,6 +73,11 @@ export default function FolderDropzone({
       return
     }
 
+    const { modelUrl, assetUrls } = buildAssetUrls(
+      validation.model,
+      validation.textures.map((texture) => texture.file),
+    )
+
     const entry: FolderEntry = {
       folderName,
       modelFile: validation.model,
@@ -67,9 +85,8 @@ export default function FolderDropzone({
       status: 'pending',
       progress: 0,
       warnings: validation.warnings,
-      modelUrl: validation.model.name.toLowerCase() === 'model.glb'
-        ? URL.createObjectURL(validation.model)
-        : undefined,
+      modelUrl,
+      assetUrls,
       viewerOpen: true,
     }