How to hide and show an object on scene in three.js

javascript three.js show-hide scene
Şeyma Yaman picture Şeyma Yaman · Mar 5, 2017 · Viewed 14.6k times · Source

I have an object which is composed of spheres on my scene. And I have a hide and show button.
The flow of my program is like that. For example, when I select one of the spheres (I used raycasting for select a sphere) then click the hide button, this sphere will be hidden. And after then click the show button it will be shown. But I don't know how can I do it.
I used three.js for creating my scene.
And I don't find any example for my question. How can I do it?
Thanks for your help.

Answer

selvarajmas picture selvarajmas · Mar 6, 2017

simply use the object traverse method to hide the mesh in three.js. In my code hide the object based on its name

object.traverse ( function (child) {
    if (child instanceof THREE.Mesh) {
        child.visible = true;
    }
});

Here is the working sample for Object show/hide option http://jsfiddle.net/ddbTy/287/

I think it should be helpful,..

Related questions

"Cross origin requests are only supported for HTTP." error when loading a local file

I'm trying to load a 3D model into Three.js with JSONLoader, and that 3D model is in the same directory as the entire website. I'm getting the "Cross origin requests are only supported for HTTP." error, but I don't …

Read More
Rotate camera in Three.js with mouse

I have quite a few objects in my scene so rotating all of them could be a pain. So what is the most easy way to move camera around origin on mouse click and drag? This way all the lights, …

Read More
How to rotate a 3D object on axis three.js?

I have a great problem about the rotation in three.js I want to rotate my 3D cube in one of my game. //init geometry = new THREE.CubeGeometry grid, grid, grid material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:…

Read More