javascript - 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)