GLTFLoader Issue with Extension-less URLs

You're encountering an issue with the GLTFLoader in Three.js 1.171.0 where it's incorrectly trying to parse a binary GLB file as JSON when the URL doesn't have a file extension.

Solution

The GLTFLoader determines the file type based on the response content type or by examining the first bytes of the file. Since your CDN serves GLB files without extensions, you can modify your code to explicitly handle the binary format by using the responseType option when loading the model.

Here's how you can modify your code:

JAVASCRIPTCopied
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const DECODER_PATH = '/draco/gltf/';
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath(DECODER_PATH);
dracoLoader.preload();
loader.setDRACOLoader(dracoLoader);

export const loadAndOptimizeGLTFModel = (path: string) => {
  // Create a custom request with explicit binary responseType
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', path, true);
    xhr.responseType = 'arraybuffer';
    
    xhr.onload = () => {
      if (xhr.status === 200 || xhr.status === 0) {
        try {
          const arrayBuffer = xhr.response;
          loader.parse(
            arrayBuffer,
            '',
            (gltf) => resolve(gltf),
            (error) => reject(error)
          );
        } catch (error) {
          reject(error);
        }
      } else {
        reject(new Error(`Couldn't load ${path} (${xhr.status})`));
      }
    };
    
    xhr.onerror = () => reject(new Error(`Couldn't load ${path}`));
    xhr.send(null);
  });
};

This approach:

1. Makes a manual XHR request with responseType set to arraybuffer
2. Uses the parse method of GLTFLoader directly with the binary data
3. Bypasses the automatic format detection that's causing your issue

This should work regardless of the file extension (or lack thereof) since you're explicitly handling the binary data.