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