Three.js: Show/hide Object3D ?

Created on 10 Jun 2011  ·  14Comments  ·  Source: mrdoob/three.js

I try to figure out how to show/hide Object3D ans his childrens at any moment.

  • with the visible property ?
  • translate it out of the frustrum ?
  • any idea ?
Question

Most helpful comment

You could just invoke
myObj3D.visible = false. This appears to hide everything that is a child of your Object3D

calling myObj3D.visible = true Shows everything.

All 14 comments

Currently you can do that like this:

THREE.SceneUtils.traverseHierarchy( object, function ( object ) { object.visible = false; } );

Thanks! It works like a charm.

FYI - To hide all children of myObject3D, snippet above should now read:

myObject3D.traverse( function ( object ) { object.visible = false; } );

I think this functionality is not yet resolved. I want to hide an object (hiding all children) but the current way of doing it (traversing) isn't feasible because I want to maintain the visible status of its children. For example, some children are visible and others not; hiding the parent should hide all children but showing it again should show children that were previously visible.

I agree. WebGLRenderer needs to accommodate that. It's something I have pending to do.

FYI: Setting visible on a parent now affects children also. (tested with r71)

Using r72. Setting visible on parent does not seem to affect children. Has the functionality changed again ?

@agnivade no, it hasn't changed. Setting visible to false means that neither the object or its children will be renderer, regardless of the children visible. If visible is set to true then the children will render only if their visible is set to true.

Thanks. Must be something wrong with my code then, will check.

Thanks

You could just invoke
myObj3D.visible = false. This appears to hide everything that is a child of your Object3D

calling myObj3D.visible = true Shows everything.

It's an old discussion, but there's an important caveat here, set visible to false "only" hides the object and it's children for the camera, but they still visible for the raycaster, unless you use 2 different layers and you disable them from the layer the raycaster is observing. If you want to make them fully invisible is needed to disable them in the layer used by the raycaster.
I use layers 0 and 1 for camera, and only layer 0 for raycasting, so I can have objects visible and raycasted:
obj.layers.enable(0); obj.visible = true;

objects visible but not raycasted:
obj.layers.disable(0); obj.layers.enable(1); obj.visible = true;

and objects hidden and not raycasted:
obj.layers.disable(0); obj.layers.enable(1); obj.visible = false;

@jscastro76 you may be interested in https://github.com/mrdoob/three.js/pull/19012

thanks, I'll take a look to it!

Was this page helpful?
0 / 5 - 0 ratings