THREE.JS：GLTFLoader 404 Not Found 問題

Question

I am trying to add a 3D model in my webpage with Three.js so I used a GLTFLoader, but I am facing an 404 Error when fetching the model, which I find weird because this is the correct path to the model. 這是我在控制台中遇到的錯誤：

錯誤：獲取“http://127.0.0.1:5500/modele/voiture/scene.gltf”以 404 響應：未找到

在我的 js 代碼中，我創建了一個 loadModel() function，並將其添加到我的 init() function 中。 這是 loadModel() function：

function loadModel() {
    // ------------ loader d'image 3D -------------- //
    const loader = new THREE.GLTFLoader();

    //loader.setCrossOrigin('./');
    
    loader.load('modele/voiture/scene.gltf', function(gltf){ 
        var voiture = gltf.scene;
        voiture.scale.setScalar(5);
        scene.add(gltf.scene);
        voiture = gltf.scene.children[0];
        rendu.render(scene, camera);
    });
}

非常歡迎對我的代碼提出任何建議：D 提前謝謝！

Answer 1

嘗試在 url 之前使用“/”。

function loadModel() {
    // ------------ loader d'image 3D -------------- //
    const loader = new THREE.GLTFLoader();

    //loader.setCrossOrigin('./');
    
    loader.load('/modele/voiture/scene.gltf', function(gltf){ 
        var voiture = gltf.scene;
        voiture.scale.setScalar(5);
        scene.add(gltf.scene);
        voiture = gltf.scene.children[0];
        rendu.render(scene, camera);
    });
}

或使用完整鏈接：

function loadModel() {
    // ------------ loader d'image 3D -------------- //
    const loader = new THREE.GLTFLoader();

    //loader.setCrossOrigin('./');
    
    loader.load("http://127.0.0.1:5500/modele/voiture/scene.gltf", function(gltf){ 
        var voiture = gltf.scene;
        voiture.scale.setScalar(5);
        scene.add(gltf.scene);
        voiture = gltf.scene.children[0];
        rendu.render(scene, camera);
    });
}

如果它不起作用，請嘗試在終端中運行curl "http://127.0.0.1:5500/modele/voiture/scene.gltf" 。 如果它沒有得到什么，服務器或 url 有問題。

Answer 2

我遇到了同樣的問題，通過將glb文件放在React Project的public文件夾中解決了。