THREE.JS : GLTFLoader 404 Not Found problem

user_15482498 0
Viewed 732

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. Here is the error I get in the console:

Error: fetch for "http://127.0.0.1:5500/modele/voiture/scene.gltf" responded with 404: Not Found

In my js code I created a loadModel() function that I added in my init() function. This is the 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);
    });
}

Any advice on my code is very welcome :D Thank you in advance!

gltf three.js http-status-code-404 3d javascript
2 Answers

Try using a "/" before the 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);
    });
}

Or use the complete link:

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

And if it does not work try running curl "http://127.0.0.1:5500/modele/voiture/scene.gltf"in your terminal. If it does not get something, there is something wrong with the server or the url.

user_147745350

I encountered the same problem and solved it by putting the glb file in the public folder in React Project.

user_197457270
Related