I am currently working on a project that involves a rotating cube. My goal is to enhance the sides of the cube by adding dice textures using MultiMaterial with MeshLambertMaterials.
So far, I have successfully created my rotating cube. View Spinning Cube Image
To load the textures onto the cube, I used the following code snippet. The textures are named 1.jpg, 2.jpg...
const loadTextures = () => {
const textureLoader = new THREE.TextureLoader();
let materials = [];
for (let i = 0; i <= 5; i++) {
const texture = textureLoader.load('./assets/textures/' + (i + 1) + '.jpg');
materials[i] = new THREE.MeshLambertMaterial({ texture });
}
return materials;
}
After loading the textures, I utilized an array of MeshLambertMaterials to create a MultiMaterial and applied it to the Cube Mesh as shown in the following code snippet.
const createCubeMesh = (width, height, depth) => {
const materials = loadTextures();
const geometry = new THREE.BoxGeometry(width, height, depth),
material = new THREE.MultiMaterial(materials),
mesh = new THREE.Mesh(geometry, material);
return mesh;
}
When running the code, I encountered some warnings but no errors. Here is a visual representation: Error & Pic Load-in Proof Image. Unfortunately, the textures did not load as expected. Here is an image showing the issue: Texture Doesn't Load Image.