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

**URL:** <https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621>\
**Category:** Questions\
**Tags:** css-renderer\
**Created:** [November 4, 2019, 5:45pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621 "2019-11-04T17:45:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daofeng\_Li](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daofeng_li/32/7758_2.png) [@Daofeng\_Li](https://discourse.threejs.org/u/Daofeng_Li)\
**Post date:** [November 4, 2019, 5:45pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/1 "2019-11-04T17:45:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 4, 2019, 8:19pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/2 "2019-11-04T20:19:02Z")

</div>

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”.

---

<div class="post-metadata">

**Author:** ![Daofeng\_Li](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daofeng_li/32/7758_2.png) [@Daofeng\_Li](https://discourse.threejs.org/u/Daofeng_Li)\
**Post date:** [November 4, 2019, 8:32pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/3 "2019-11-04T20:32:05Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 4, 2019, 8:36pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/4 "2019-11-04T20:36:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Daofeng\_Li](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daofeng_li/32/7758_2.png) [@Daofeng\_Li](https://discourse.threejs.org/u/Daofeng_Li)\
**Post date:** [November 4, 2019, 8:41pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/5 "2019-11-04T20:41:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 4, 2019, 8:44pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/6 "2019-11-04T20:44:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 4, 2019, 8:46pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/7 "2019-11-04T20:46:37Z")

</div>

Check out this fiddle to see what I mean: [https://jsfiddle.net/ha96sj5r/1/](https://jsfiddle.net/ha96sj5r/1/)

---

<div class="post-metadata">

**Author:** ![Daofeng\_Li](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daofeng_li/32/7758_2.png) [@Daofeng\_Li](https://discourse.threejs.org/u/Daofeng_Li)\
**Post date:** [November 4, 2019, 9:07pm UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/8 "2019-11-04T21:07:12Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![Daofeng\_Li](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daofeng_li/32/7758_2.png) [@Daofeng\_Li](https://discourse.threejs.org/u/Daofeng_Li)\
**Post date:** [November 5, 2019, 5:11am UTC](https://discourse.threejs.org/t/set-mesh-to-invisible-but-its-children-still-visible/10621/9 "2019-11-05T05:11:21Z")

</div>

Yeah,the code in my repo is probably too complicated for you to test…I tried create the [example code in codesandbox](https://codesandbox.io/s/morning-cache-mg9jb), but somehow I cannot reproduce it…don’t know why…sorry for that…