Show children of invisible parents

Question

In my scene I have an object graph, where I add child objects to parents. However, when I set parent.visible = false three.js behaves correctly and shows no element in the hierarchy.

But for my project I want a different behavior. I want that child objects show up, when their visibility is true , even when parent objects are hidden.

What would be the best way to achieve this? I thought of assigning a transparent material to parent objects, but I heard that this can cause problems when rendering the scene and should be omitted.

Answer 1

Children of an invisible parent are not visible.

There is a reasonable workaround, however: set the material visibility to false.

You will need to clone() the material for each object, but that is OK, because the objects will (in the case of WebGLRenderer ) still share the same shader program.

var material = new THREE.MeshPhongMaterial();

parent = new THREE.Mesh( geometry, material.clone() );
parent.material.visible = false;

child = new THREE.Mesh( geometry, material.clone() );

EDIT: Updated answer based on OP suggestion (see comments) and recent pull request.

three.js r.68 (r.69dev for CanvasRenderer )

Answer 2

Another workaround would be to change the objects relationship slightly.

The nodes that you want to become transparent should be container nodes, that have children , but that have no visual representation. And the mesh of this container is a child with an special name, like self or something like that.

this way setting the node to transparent is a function that turns the self child to transparent, but this one has no children and then there is no problem