How to map different textures to a glb model

Questions
,
1

I’m new to three.js, I want to load different textures on different sides on my GLB model, is that possible?
I tried it like this with a normal cube:

var geometry_cube = new THREE.BoxGeometry(2,2,2);
var materials = [
  new THREE.MeshBasicMaterial({ color: 0xff0000}),
  new THREE.MeshBasicMaterial({ color: 0x0000ff }),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
  new THREE.MeshBasicMaterial({ color: 0xffff00 }),
  new THREE.MeshBasicMaterial({ map: texture_1 }),
  new THREE.MeshBasicMaterial({ map: texture_2 })
];

var cube = new THREE.Mesh(geometry_cube, materials);
scene.add(cube);

and then I wanted to do it like this with the glb model:
Note: the glb model has also 6 sides.

gltfLoader.load('glb_model.glb', (gltf) => {
  const model = gltf.scene;

  model.traverse((child) => {
    if (child.isMesh) {
      child.material = materials;
    }
  }),
});

The model does not load, but there is no error message.
Then I tried child.material.map = texture_1 and it works, but it renders on all sides.
Hope you can help me, thanks in advance.

2

You can’t use multi-materials with glTF assets since GLTFLoader does not support BufferGeometry.groups, a prerequisite for using multi-materials.

When a mesh is authored with multiple materials in a tool like Blender and exported to glTF, GLTFLoader will split up the mesh into multiple ones (each for one material). So if you authored your model correctly, you should end up with six meshes with six independent materials.

3

Thanks @Mugen87 for your answer, it helped me and gave me food for thought.
I made my model with different materials and changed the texture/color with model.getObjectByName('cube').material.map = texture;. It was easier than I thought.

1 Like