Change visibility of CSS2D objects when a parent THREE.js Group has its visibility changed

Question

I have added meshes and CSS2DObjects (labels) to a THREE.js Group.

When I toggle the Group.visible property the visibility of the meshes also changes (as expected).

But, unfortunately, the visibility of the CSS2DObjects does not change.

This is known behaviour and a discourse thread from 2019 shows how to toggle the visibility of a CSS2DObject (with a known div) by setting its style.display to 'none' or 'block' . (Thanks to Mugen87).

labelDiv1.style.display = 'none';
labelDiv2.style.display = 'block';

I need a way to get a list of all the CSS2DObjects which are "in" a Group - either (a) because they have been added directly to the group or (b) because they have been added to a mesh which has been added to the Group or (c) more complicated hierachical relations eg child of mesh which is child of mesh added to Group).

Then, for each selected CSS2DObject I need to obtain the associated div. I could probably, given time, knock something up which works for the relatively-simple app I am working on. But I wonder if there might be something out there already which might be more flexible and future proof to save re-inventing the wheel. (Ideally such a facility would be part of THREE.js IMO).

Answer 1

You're looking for Object3D.traverse() , which recursively loops through all the descendants of the object, including children, grand-children, and so on.

https://threejs.org/docs/#api/en/core/Object3D.traverse

Once in the traverse callback, you could check the object .type to see if it's a CSS2DObject.