Search code examples
javascriptthree.jssiemens

Threejs: Change color of only one child object

i have a problem with changing the color of a element of my 3D Model (imported with the GLTFLoader). I added some pictures of the structure of the model.

I want to change the color of the marked children element in red. The path is: children[0].children[31].children[10].children[1]

enter image description here enter image description here

If i change the color in the property material, the elements of the object with the same color (in this case white) change their color to red.

The object is exported with Siemens NX. I think the problem is the structure of the 3D Model. The children elements for example do not have a name (they have a name but it is like mesh_736). So for the future I have to add names to the object elements. Does anyone work with NX, too? How can I organize a object the right way to work easy with Threejs with it?

Solution

  • If i change the color in the property material, the elements of the object with the same color (in this case white) change their color to red.

    This probably happens because these objects share the same material. Try to clone the material first and then change its color property. This approach should not affect other objects.

    const material = object.material.clone();
material.color.set( 0xff0000 );
object.material = material;