Overlapping Html in react-three-fiber

As seen in the image, my modal and annotations are overlapping. I want the modal to be above these annotations. I have tried setting the z-index but it doesn’t seem to work.

Here’s the sandboxcode for the same. The modal can opened by clicking on the camera model.

  zIndexRange={[16777271, 0]} // Z-order range (default=[16777271, 0])

the modal should either be op top of canvas or have a higher zindex. that means you need to lower the range on the drei/html element.

btw there was also a new release yesterday, html will now naturally occlude https://twitter.com/0xca0a/status/1609939896155652096

1 Like