Three.js GLTFLoader 未正確讀取 .glb 文件

Question

我創建了一個簡單的 React 應用程序，它有一個用 three.js 初始化的場景。我在使用 GLTFLoader 加載 model 時收到以下錯誤。

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

我在 App.js 組件的頂部導入了以下內容

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

在我的 function App() 組件中，我執行了以下操作：

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);
    })

  }, []);

我確信 my.glb model 的文件路徑是正確的，並且對 GLTFLoader 無法讀取文件內容的原因感到困惑。 如果我更改文件路徑，我會得到完全相同的錯誤。 SceneInit class 設置了一個基本的 three.js 場景，並且可以正確地使用常規球體。

文件夾目錄

Answer 1

我只需將 model 放入公用文件夾目錄即可解決此問題。 不知道為什么 three.js 不能直接讀取文件路徑。