feat: support glb model assets

src/data/docs/docsTranslations.ts

@@ -214,7 +214,7 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
 ## Scène
 
 - Scène React Three Fiber plein écran
-- Carte principale chargée depuis \`public/models/map/model.gltf\`
+- Carte principale chargée depuis \`public/models/{name}/model.glb\`, avec fallback vers \`model.gltf\`
 - Scène de test physique debug sélectionnable depuis le panneau debug
 - Éclairage ambiant et directionnel
 - Configuration de l'environnement de fond
@@ -268,7 +268,7 @@ L'éditeur travaille sur la liste de nodes stockée dans "/public/map.json".
 
 Chaque node décrit un objet de la scène :
 
-- "name" : nom du dossier modèle dans "/public/models/{name}/model.gltf"
+- "name" : nom du dossier modèle dans "/public/models/{name}/model.glb", avec fallback vers "model.gltf"
 - "type" : catégorie de l'objet
 - "position" : "[x, y, z]"
 - "rotation" : "[x, y, z]"

src/pages/editor/page.tsx

@@ -138,7 +138,7 @@ export function EditorPage(): React.JSX.Element {
               <h4>Structure requise :</h4>
               <pre>
                 public/ ├── <strong>map.json</strong> (à la racine) └── models/
-                ├── arbre/ │ └── model.gltf ├── building/ │ └── model.gltf └──
+                ├── arbre/ │ └── model.glb ├── building/ │ └── model.gltf └──
                 ...
               </pre>
             </div>

src/utils/editor/loadEditorScene.ts

@@ -21,9 +21,12 @@ export async function createSceneDataFromFiles(
   const models = new Map<string, string>();
 
   for (const [path, file] of fileMap.entries()) {
-    const modelMatch = path.match(/^\/models\/(.+)\/model\.gltf$/);
-    if (modelMatch?.[1]) {
-      models.set(modelMatch[1], URL.createObjectURL(file));
+    const modelMatch = path.match(/^\/models\/(.+)\/model\.(glb|gltf)$/);
+    const modelName = modelMatch?.[1];
+    const modelExtension = modelMatch?.[2];
+
+    if (modelName && (modelExtension === "glb" || !models.has(modelName))) {
+      models.set(modelName, URL.createObjectURL(file));
     }
   }
 

src/utils/loadMapSceneData.ts

@@ -2,7 +2,7 @@ import type { MapNode, SceneData } from "@/types/editor";
 import { parseMapNodes } from "@/utils/mapNodeValidation";
 
 const MAP_JSON_PATH = "/map.json";
-const MODEL_FILE_NAME = "model.gltf";
+const MODEL_FILE_NAMES = ["model.glb", "model.gltf"];
 const HTML_CONTENT_TYPE = "text/html";
 type ModelEntry = [modelName: string, modelUrl: string];
 
@@ -27,21 +27,26 @@ async function loadMapModelUrls(
 ): Promise<Map<string, string>> {
   const uniqueModelNames = [...new Set(mapNodes.map((node) => node.name))];
   const modelEntries = await Promise.all(
-    uniqueModelNames.map(async (modelName) => {
-      const modelUrl = `/models/${modelName}/${MODEL_FILE_NAME}`;
-
-      try {
-        const response = await fetch(modelUrl, { method: "HEAD" });
-        const contentType = response.headers.get("content-type") ?? "";
-        const modelEntry: ModelEntry = [modelName, modelUrl];
-        return response.ok && !contentType.includes(HTML_CONTENT_TYPE)
-          ? modelEntry
-          : null;
-      } catch {
-        return null;
-      }
-    }),
+    uniqueModelNames.map((modelName) => loadModelEntry(modelName)),
   );
 
   return new Map(modelEntries.filter((entry) => entry !== null));
 }
+
+async function loadModelEntry(modelName: string): Promise<ModelEntry | null> {
+  for (const fileName of MODEL_FILE_NAMES) {
+    const modelUrl = `/models/${modelName}/${fileName}`;
+
+    try {
+      const response = await fetch(modelUrl, { method: "HEAD" });
+      const contentType = response.headers.get("content-type") ?? "";
+      if (response.ok && !contentType.includes(HTML_CONTENT_TYPE)) {
+        return [modelName, modelUrl];
+      }
+    } catch {
+      continue;
+    }
+  }
+
+  return null;
+}

src/world/GameMap.tsx

@@ -6,12 +6,17 @@ import { loadMapSceneData } from "@/utils/loadMapSceneData";
 import type { OctreeReadyHandler } from "@/types/three";
 import type { MapNode } from "@/types/editor";
 
+interface LoadedMapNode {
+  node: MapNode;
+  modelUrl: string;
+}
+
 interface GameMapProps {
   onOctreeReady: OctreeReadyHandler;
 }
 
 export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
-  const [mapNodes, setMapNodes] = useState<MapNode[]>([]);
+  const [mapNodes, setMapNodes] = useState<LoadedMapNode[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const groupRef = useRef<THREE.Group>(null);
 
@@ -27,9 +32,10 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
           return;
         }
 
-        const loadedMapNodes = sceneData.mapNodes.filter((node) =>
-          sceneData.models.has(node.name),
-        );
+        const loadedMapNodes = sceneData.mapNodes.flatMap((node) => {
+          const modelUrl = sceneData.models.get(node.name);
+          return modelUrl ? [{ node, modelUrl }] : [];
+        });
         const missingModelCount =
           sceneData.mapNodes.length - loadedMapNodes.length;
 
@@ -54,16 +60,25 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
     <group ref={groupRef}>
       {!isLoading &&
         mapNodes.map((node, index) => (
-          <ModelInstance key={index} node={node} />
+          <ModelInstance
+            key={index}
+            node={node.node}
+            modelUrl={node.modelUrl}
+          />
         ))}
     </group>
   );
 }
 
-function ModelInstance({ node }: { node: MapNode }): React.JSX.Element {
-  const modelPath = `/models/${node.name}/model.gltf`;
+function ModelInstance({
+  node,
+  modelUrl,
+}: {
+  node: MapNode;
+  modelUrl: string;
+}): React.JSX.Element {
   const groupRef = useRef<THREE.Group>(null);
-  const { scene } = useGLTF(modelPath);
+  const { scene } = useGLTF(modelUrl);
   const sceneInstance = useMemo(() => scene.clone(true), [scene]);
   const { position, rotation, scale } = node;