Three.js GLTFLoader 未正确读取 .glb 文件

Question

I created a simple React app that has a scene initialized with three.js. Im getting the following error when loading a model with GLTFLoader.

GLTFLoader.js:192 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at GLTFLoader.parse (GLTFLoader.js:317:1)
at Object.onLoad (GLTFLoader.js:212:1)
at three.module.js:40464:1

I imported the following at the top of my App.js component

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

and in my function App() component I did the following:

useEffect(() =>{
    const test = new SceneInit('myCanvas');
    test.initialize();
    test.animate();

    // Load model
    const glftLoader = new GLTFLoader();
    glftLoader.load('./football.glb', (gltfscene) => {
      test.scene.add(gltfscene.scene);
    })

  }, []);

I am positive that the file path to my.glb model is correct and am confused on why the GLTFLoader is not able to read the contents of the file. If I change the file path I get the same exact error. The SceneInit class sets up a basic three.js scene and works correctly with a regular sphere.

Folder Directory

Answer 1

I was able to resolve this by simply putting the model inside the public folder directory. No idea why three.js can't just read the file path directly.