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