Threejs: Change color of only one child object

Question

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]

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?

score 1 · Accepted Answer · answered Oct 10 '22 at 08:47

1

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;

answered Oct 10 '22 at 08:47

Mugen87

28,829
4
27
50

Thank you again. It works. But I don't get why this way works? Why does this way not override the material of the whole object? – stoex Oct 10 '22 at 09:02
1

When you clone an object a new instance is created with a new configuration. Since you only assign the new material to the object you want to customize, other objects are not affected. – Mugen87 Oct 10 '22 at 09:17
are you familiar with exporting models out of Siemens NX? There have to be a way to set the color without cloning. – stoex Oct 10 '22 at 12:29
Sorry, I'm not familiar with this tool. – Mugen87 Oct 10 '22 at 12:46

score 0 · Answer 2 · edited Feb 25 '23 at 22:09

Here is my take on the question and I am no expert but I struggled with this for a couple days so here is my response. All I set out to do was to change a color from a specific part from the resulting GTLF/GLB file

// this traverse's through the scene objects children and parents. 
const SetColorTEXTURE = (c) => {
  console.log('BREAK1', c);
  Viewer.scene.traverse(function (child) {
    console.log('BREAK2C ', child)
    if (child.name.includes('XXXXXX-PCB-XXX-XXXX')) {
      for (const i of child.children) {
        console.log('BREAK2B ', i)
        if (i.isMesh) {
          console.log('BREAK2A ', i)
          i.material.color = new THREE.Color('rgb(212,175,55)');

        }
       
      }
    }
    if (child.isMesh) { ...

What I figured out is that the STEP file I had doesn't necessarily have the needed grouping and setup for 2 main things.

The grouping of the children. From what I see all of the children hold their own styling that can also be tied to MaterialStandardMesh namespace. I will get to that more in the 2nd point. The reason why I was having an issuing styling a particular Mesh is because the parent was the top level namespace and like the original OP had a name of "". This is what was so confusing to me too. I could make the Mesh not visible but I couldn't add 1 color style or texture to that particular item.

Here is how the Mesh looks in the console for a specific item. Notice the 4 parts. 1. There is a parent: Group with a name of "" which has a parent: scene with a 2. name of xx-scene. That's the main scene.

You'll also notice the 3. the material: MeshStandardMaterial has a name of '' empty. Again, more on that in the second part.

In other words everything is going back from the parent: Group and Scene which is actually a tree, to the main parent/scene which is xxx-scene #2 in the image below.

Scene
  |
  -- Group
  |
  -- PerspectiveCamera

From this information there would be 2 ways to isolate a specific item in the GTFL/GLB file. One, from the information I showed previously. I will show an example below. And 2 would be to create and name specific material: MeshStandardMaterial properties.

This is items 3,4 in the diagram below. As you see, there is no name for that property either so as a result it is an empty namespace and everything with the main scene is going to be the same color/texture no matter what you do. There is no setting of a parent.child or material classification difference so you can't change the separately from what I see.

This is why the cloning doesn't work because you're just cloning the same problem without creating another scene, potentially. In any event, that didn't work for me in any easy way.

In the code snippet above I test my theory by isolating a child of the parent scene. In this case I was able to isolate all of the Mesh for that child and change only those properties.

In the console screenshot below it illustrates a child of a parent which was a child of Scene carries its own Object3D and Mesh. In this case even without the material specific properties of each Mesh I was still able to alter the specific item in this case.

In this picture below you can see the 3 different colors applied with code snippet above and the traversal mechanism of the Viewer.scene.Traverse method.

Threejs: Change color of only one child object

2 Answers2