drei icon indicating copy to clipboard operation
drei copied to clipboard

`<Html>` visible prop doesn't work as expected

Open gewesp opened this issue 1 year ago • 2 comments

  • three version: 0.149.0
  • @react-three/fiber version: 8.10.4
  • @react-three/drei version: 9.56.18
  • node version: v18.12.1
  • npm (or yarn) version: 9.2.0

Problem description:

Setting visible to false on an <Html> doesn't seem to hide it as expected.

Relevant code:

<Canvas>
...
<Html visible={false}> Hello World </Html>
...
</Canvas>

Notice that the Hello World will still appear on the screen.

Suggested solution:

Adding a <div style="display:none"> appears to work for us if added inside the <Html> tag. Maybe <Html> could do that, with the style depending on the visible prop.

gewesp avatar Feb 28 '23 12:02 gewesp

+1 I'm also running into this!

It would also be nice if we set visible={false} on a parent for the <Html /> component to not render.

brentyi avatar Apr 28 '23 20:04 brentyi

It happened to me too, and I hope to fix this problem soon!

yinhw0210 avatar Nov 15 '23 02:11 yinhw0210