javascript - How to hide and show an object on scene in three.js - Stack Overflow

admin管理员组

文章数量:1202373

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.

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.

• javascript
• three.js
• show-hide
• scene

Share Improve this question Follow asked Mar 5, 2017 at 14:31 Şeyma YamanŞeyma Yaman 12111 gold badge33 silver badges1111 bronze badges 6

• 1 Each Object3D has a .visible attribute. From (r84) threejs.org/docs/index.html?q=object3#Reference/Core/Object3D – gaitat Commented Mar 5, 2017 at 14:35
• Actually, I want to an example. Because I can't imagine. – Şeyma Yaman Commented Mar 5, 2017 at 14:37
• @ŞeymaYaman What kind of example do you want? How to set a property to true or false? – prisoner849 Commented Mar 5, 2017 at 15:03
• Little jsfiddle example. I try to write but I get an error. – Şeyma Yaman Commented Mar 5, 2017 at 15:53
• That's why it's better to show what you've tried already (jsfiddle, codepen etc) – prisoner849 Commented Mar 5, 2017 at 16:22

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 11

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,..

Try this:

object.visible = false; //Invisible
object.visible = true;  //Visible

本文标签： javascriptHow to hide and show an object on scene in threejsStack Overflow