Set mesh to invisible but it's children still visible?

my mesh has a child which is CSS2DObject, i set the mesh to invisible, but the CSS2DObject is still visible. Is this a bug or design?

This is more or less a limitation of the CSS renderers. Using Object3D.visible works well with WebGLRenderer since you have to render objects per frame in order to make them appear on screen.

This is no true from CSS/HTML since HTML elements are not rendered via drawcalls. Once added to the DOM, they stay visible until the element is removed or an appropriate style is applied (like display: none;).

So this is something you have to solve on application level right now. If you like, you can file a feature request at github. Something like: “CSSRenderers: Add support for Object3D.visible”.

Thank you @Mugen87. I did this seems fixed my problem: (when I make mesh invisible)

myMesh.children.forEach( child => (child.visible = false))

Does this also work if the child CSS2DObject was at least displayed once?

yes! I add a toggle using dat.gui, seems works fine for me.

Strange. Both renderers do not evaluate Object3D.visible and also don’t show/hide HTML elements via CSS.

Check out this fiddle to see what I mean:

Yeah, I tried with your fiddle and you are right…i cannot make it working as I described…I was using CSS2Drenderer…i msg’ed you my repo…if you are interested…
if I toggle display of a mesh, I do see the CSS (of the child label) added a display: none

Yeah,the code in my repo is probably too complicated for you to test…I tried create the example code in codesandbox, but somehow I cannot reproduce it…don’t know why…sorry for that…