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!
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.