CODEWITHSUNDEEP
javascriptthree.js
Nicolay Hekkens
Nicolay Hekkens

Reputation: 530

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

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);
  });

}

Upvotes: 2

Views: 1412

Answers (2)

Nicolay Hekkens
Nicolay Hekkens

Reputation: 530

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
    );
});

Upvotes: 0

Mugen87
Mugen87

Reputation: 31076

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.

Upvotes: 2

Related Questions