Changing mesh visibility from the scene

Questions
,
1

Hey Guys,

Please help.

As you can see in the screenshot.

This is the print of a scene object.

I have a 3d Model(glb) which contains mesh names such as legs, cushions, back, supports, base.

I could see each mesh row’s object key which is called visible(boolean) and I could make them invisible while I load the model and add this model to the scene. I have direct access to the mesh in that model.

But inside the seen object as you can see I have children.children

How can I change each mesh visibility from scene object itself.

Basically I am trying to make some parts visible based on clicks on the button such as back, base, supports etc.

I am following this tutorial to learn ThreeJS

Kindly let me know If I am unable to express my problem.

Screen Shot 2022-11-20 at 8.02.05 PM
Screen Shot 2022-11-20 at 8.02.05 PM1920×1200 128 KB

2

Since your meshes have names, you could find them via scene.getObjectByName()

Once you found them, you can assign the result to a JS variable, so you don’t have to look up again.

4

By scene I mean the topmost scene, you still can call getObjectByName() on it and find the mesh even if it’s inside a scene inside a scene along with other meshes and lights.

5

Yes, I am trying, Seems like working.

But what is the best way to toggle them. Because I am not removing them.

right now I am traversing the scene and checking if it is mesh and the name === “legs” (example) then update the isVisible to false

Is this right way to do it?

Users will simply toggle different mesh based on their requirements.

Is there any suggestion?

6

You can put all meshes you care about into an object and then toggle visible property, off the top of my head:

const parts = {};

['arms', 'legs'].forEach(nm => parts[nm] = scene.getObjectByName(nm));

document.getElementById('somebutton').addEventListener('click', () => {
parts.legs.visible = !parts.legs.visible;
});
1 Like
7

Thank you very much. I will try this.