Three.js - Changing material of specific GLTF when it is used multiple times

1
votes

Im currently loading a GLTF asset and using it multiple times in the scene.

I want to change material color of all meshes inside a targeted object which is a GLTF.

traverseMaterials(object, (material) => {
    material.color.set(
        object.info.model.color
    );
});

This is working however it changes all other GLTF objects.

My goal is to change the targeted object and its children's mesh materials colors. ( Not all of them for all used GLTF's )

I tried this but nothing happens.

traverseMaterials(object, (material) => {
    let clonedMaterial = material.clone();
    material = clonedMaterial;
    material.color.set(
        object.info.model.color
    );
});

Here is the traverseMaterials function for reference

function traverseMaterials (object, callback) {
     object.traverse((node) => {
     if (!node.isMesh) return;
     const materials = Array.isArray(node.material)
     ? node.material
     : [node.material];
     materials.forEach(callback);
  });

}

2
javascriptthree.js

2 Answers

1
votes

material = clonedMaterial;

Just doing this does not change the reference of node.material. Meaning you actually have to assign the cloned material to node.material.

-1
votes

Thanks to @Mugen87 for the advice, I ended up changing the traverse as follows:

object.traverse((node) => {
    if (!node.isMesh) return;
    let clonedMaterial = node.material.clone();
    node.material = clonedMaterial;
    node.material.color.set(
       this.state.modelData.statusList[statusIndex].statusColor
    );
});