Use explicit fetch + GLTFLoader.parse for GLB model loading.

This avoids internal loader fetch failures, preserves auth headers for private assets, and provides clearer HTTP errors before fallback rendering.

Made-with: Cursor

web/maplibre-demo.js

@@ -354,23 +354,23 @@ async function loadModelTemplate(modelURL) {
   const cached = modelTemplateCache.get(modelURL);
   if (cached) return cached;
 
-  const pending = new Promise((resolve, reject) => {
-    gltfLoader.setRequestHeader(accessToken ? { Authorization: `Bearer ${accessToken}` } : {});
-    gltfLoader.load(
-      modelURL,
-      (gltf) => {
-        const root = gltf.scene || gltf.scenes?.[0];
-        if (!root) {
-          reject(new Error("GLTF file has no scene graph."));
-          return;
-        }
-        prepareModelRoot(root);
-        resolve(root);
-      },
-      undefined,
-      reject
-    );
-  });
+  const pending = (async () => {
+    const headers = accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined;
+    const response = await fetch(modelURL, { headers });
+    if (!response.ok) {
+      throw new Error(`Failed to load model asset: HTTP ${response.status}`);
+    }
+    const binary = await response.arrayBuffer();
+    const gltf = await new Promise((resolve, reject) => {
+      gltfLoader.parse(binary, "", resolve, reject);
+    });
+    const root = gltf.scene || gltf.scenes?.[0];
+    if (!root) {
+      throw new Error("GLTF file has no scene graph.");
+    }
+    prepareModelRoot(root);
+    return root;
+  })();
 
   modelTemplateCache.set(modelURL, pending);
   try {