Html from react-three/drei needs to be below of other meshes

Asked Nov 14 '22 at 05:32

Active Nov 14 '22 at 15:11

Viewed 104 times

HTML from react-three/drei is always on top of scene. I need one mesh(Image) cover this HTML. But Html is always on top of scene.

I tried as the following.

<ImageImpl zIndexRange={[8, 9]} style={{zIndex:8}} ref={ref_s} url={"/plans" + index + '.png'} transparent position={[props.position[0], props.position[1], 0]} scale={props.scale} >
      </ImageImpl>
      <Html zIndexRange={[2, 6]} style={{zIndex:-4}} position={[0,0,0]}>
        <p style={{color:'white', fontSize:'32px'}}>
          This is test.
        </p>
      </Html>

chair is individual png and text covered this image. I need Img to cover the text