Troubleshooting the 404 Not Found Issue with THREE.JS GLTFLoader

Question

Troubleshooting the 404 Not Found Issue with THREE.JS GLTFLoader

I'm currently working on incorporating a 3D model into my webpage using Three.js and I've encountered a 404 Error while trying to fetch the model with GLTFLoader. It's puzzling because I am certain that the path to the model is correct. Here is the error message displayed in the console:

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

Within my JavaScript code, I have implemented a loadModel() function which I then included in my init() function. This is how the loadModel() function looks like:

function loadModel() {
    // ------------ 3D Image Loader -------------- //
    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);
    });
}

I would greatly appreciate any advice or feedback on my code. Thank you so much in advance!

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

Answer 1

Answer №1

Make sure to add a "/" before the url path.

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

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

Alternatively, you can use the full link:

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

    //loader.setCrossOrigin('./');

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

If that doesn't work, try running

curl "http://127.0.0.1:5500/model/car/scene.gltf"

in your terminal. If nothing is returned, there may be an issue with the server or the url.

Answer 2

Make sure to add a "/" before the url path.

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

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

Alternatively, you can use the full link:

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

    //loader.setCrossOrigin('./');

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

If that doesn't work, try running

curl "http://127.0.0.1:5500/model/car/scene.gltf"

in your terminal. If nothing is returned, there may be an issue with the server or the url.

Answer 3

Answer №2

After facing a similar issue, I successfully resolved it by relocating the glb file to the public folder within my React Project.

Answer 4

After facing a similar issue, I successfully resolved it by relocating the glb file to the public folder within my React Project.

Troubleshooting the 404 Not Found Issue with THREE.JS GLTFLoader

Answer №1

Answer №2

Similar questions

The functionality of the date picker is hindered when a dropdown with multiple selections is activated, and conversely, the multi-selection feature of

Mastering the Art of jQuery Function Chaining for Beginners

"Unable to append new <li> elements to a sortable list in jQuery UI once all existing <li>

Jquery onchange event fails to fire

Sharing a React UI Library featuring custom styled components

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

Tips for designing a hyperlink insertion modal while preserving text selection

Uncovering the hidden treasures of checkbox values using jQuery

Updating dynamic content in IBM Worklight V6.1 with jQuery Mobile v1.4.3 requires waiting for the DOM to load

The 'in' operator cannot be utilized to search for '_id' within

Exploring the integration of JSONP with the unmatched features of Google

Guide for scrolling to the top of a span located outside an iframe while working within the iframe

What is the best way to utilize unique slash commands in Slack threads?

Using AJAX to send an array of values to a PHP script in order to process and

Arranging the items in a specific sequence - Angular

Trouble with Highchart.js when passing an array

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

The Holy Alliance of Laravel and Vue

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

Error when trying to assign values to an undefined property in an array