CODEWITHSUNDEEP
javascriptthree.js
Gtomika
Gtomika

Reputation: 885

ThreeJS: Texture shows up in debug, but not in normal mode

I'm learning ThreeJS (and JavaScript), currently creating a scene with 2 meshes:

If I run it in debug mode (VS Code) then everything is fine, but if I just run index.html, then the texture for the "floor" is not loading (see images below).

Here is the relevant code sample that is creating the floor:

const textureLoader = new THREE.TextureLoader();
const floorTexture = textureLoader.load('img/checkerboard.jpg');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(2,2);
const floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
const floorGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
scene.add(floor);

NOTE: I did try this with the TextureLoader load finished callback, creating the floor when the texture finished loading, but it doesn't make a difference.

This is what shows up when running in debug, running from VS Code (don't mind that it's rotated):

Working

If, however I start up index.html directly from the file explorer, the following can be seen:

enter image description here

You can see that the cube is cut in half, so the mesh is there, but with no texture. Help is appreciated!

Upvotes: 2

Views: 239

Answers (1)

Mugen87
Mugen87

Reputation: 31026

If, however I start up index.html directly from the file explorer, the following can be seen:

If you load models or textures from external files, due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception. The best solution for this issue is to run your contents on a local web server.

More information about this topic in the following guide.

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

Upvotes: 1

Related Questions