Hi everyone,
I’m running into a bit of a problem with loading textures in my Three.js project, and I could really use some help. I’ve been at this for hours and can’t seem to figure it out. Here’s what’s happening:
I’m trying to load a texture using THREE.TextureLoader, but I keep getting this error:
THREE.TextureLoader: Texture .load failed
three.module.js:29907 GET http://example.com/textures/texture.jpg 404 (Not Found)
A bit of background: I’m working on a simple scene with a textured cube. Everything was going smoothly until I tried to add textures. Here’s the relevant part of my code:
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('http://example.com/textures/texture.jpg', function (texture) {
// On load, apply the texture to the material
const material = new THREE.MeshBasicMaterial({ map: texture });
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
}, undefined, function (err) {
console.error('An error happened.', err);
});
When I search about this, I came across to these resources (SOLVED) Texture not loading learn rpa uipath and as per them, the 404 (Not Found) error suggests that the texture file can’t be found at the specified URL. You have to check URL again, when I triple-checked the URL, and the file is definitely there. I even tried accessing the URL directly in my browser, and the image loads fine.
Here’s what I’ve tried so far:
Checked the file path: The URL seems correct, and the image loads in the browser.
CORS issues: Maybe? I’m not sure how to check or fix this if it is a CORS problem.
I’m kind of stuck and not sure what to do next. Could it be something with the server settings or maybe something I’m missing in my code? Any advice or tips would be greatly appreciated!
Thanks in advance.
