Manipulate child mesh material without affecting parent object

Hi,

I have loaded in a model with a mesh pasted against it.
Three.js recognises this mesh as a group (with meshes as children) and i am able to manipulate the position of the Meshes without affecting the parent object.
However when i attempt to change the color of the material of a single Mesh, the parent object automatically gets affected as well. Is there a way to prevent this from happening?
![Model|415x500]

The Model with mesh:

The code i use:

I have also tried:

CodeEx2

There’s a chance both objects share a single material instance. Before changing the color try cloning the material:

children[1].material = children[1].material.clone();
children[1].material.color.setHex(0xffff00);
1 Like

Thank you for the quick response!

This has fixed my problem so i can’t thank you enough. Yet i do not quite understand what exactly happened.
Was the material duplicated before being colored? If so, what happened to the old one and how come they dont share a single material instance after the cloning happened?

By default, your model submeshes shared a single material. So whenever you modified material of one of them - you also changed the other one (since they had literally only a single material, just rendered on 2 separate submeshes.)

material.clone() copies a material - so what the code does is it takes the material of the submesh (the one that is shared between all of them), duplicates it, and assigns to be this submesh’s new material. Duplicated material is a separate instance, so making changes to it will not affect the material of other submeshes.

1 Like