Currently delving into ThreeJS and JavaScript, I am in the process of constructing a scene with 2 meshes:
- A cube positioned at the origin.
- A "floor" situated on the XY plane, utilizing a checkered texture loaded from an image.
When running it in debug mode through VS Code, everything functions as expected. However, if I run index.html on its own, the texture for the "floor" fails to load (refer to the images below).
Below is the pertinent code snippet responsible for generating 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: Despite attempting to create the floor once the texture finishes loading using the TextureLoader load finished callback, the issue remains unresolved.
The following screenshot depicts the result when running in debug mode via VS Code (disregard the rotation):
https://i.sstatic.net/zCHND.png
However, running index.html directly from the file explorer presents a different outcome:
https://i.sstatic.net/8GIgV.png
As evident, the cube appears to be halved, indicating the existence of the mesh but lacking a texture. Any assistance would be greatly appreciated!