I’ve spent close to 40hrs trying to find a solution and cannot find anything on the web to help me. I’m loading a GLTF model of a bathroom into three.js. When loading I’m trying to change the material of individual meshes at load time by loading in the JPG files which represent each tile variation. After I load the texture and apply it to each mesh the meshes are appear to be solid colors and do not look anything like the JPG files loaded.
My goal is to load a GLTF model and allow the user to change tile patterns from a list of realistic photos, allowing the user to see a realtime update of the materials.
Can anyone help provide direction to get the material to show properly? I created a cube and set the material just fine but I cannot set the material for a mesh that is imported from blender…
Here’s what I’m doing:
1.) I create a 3D model of my bathroom in blender
2.) I export the model as a .GLB file with no materials
3.) I load the model into three.js
4.) I loop through each mesh in the scene
5.) If I find a tile I load the texture and apply the material
const floorTextures = []; // I load the array with three variations of tiles…
for (let i=1;i<=3;i++) {
floorTextures.push(new THREE.TextureLoader().load(’/assets/b3d/flooring/tile’ + i + ‘.jpg’));
}
// Ioad the gltf model from project folder
glTfLoader.load( ‘/assets/b3d/obj/’ + model, (gltf: GLTF) => {
const scene = gltf.scene;
const meshs = scene.children;
meshs.forEach((mesh: any, i: number) => { // loop through each mesh in the scene
const isFlooringTile = mesh.name.indexOf(‘flooring-tile’) > -1;
if (isFlooringTile) { // if mesh is a tile…
mesh.traverse((node) => { // traverse the mesh, find the node
if (node.isMesh) { // randomly select a tile image and create a Basic Material
let mat = new THREE.MeshBasicMaterial( { map: floorTextures[Math.floor(Math.random() * floorTextures.length)] } );
node.material = mat; // set the material
}
}
});
});
Screenshot: https://portal.giantgeneral.com/screenshots/ss1.png
In the screenshot above I’ve applied this method to the shower tiles and the floor tiles. I tried PNG files and JPG files with the same solid color effect. To the bottom left I added a box mesh and applied the same floor tile image material and it worked fine but it doesn’t work on the imported tile meshes from the .GLB file.