Displaying a Line element on top of an html img

Questions
,
1

image
image675×383 53.7 KB

Hi, I’m working on an app that displays hotspots over a product, as you can see the hotspots are displayed behind the Image, so I was wondering if there is a way to put the Line elements (the blue lines on the screenshot) on top of my product image.

For context I’m building the canvas with a mix of 2D and 3D, it has to be this way for my project requirements. The image displayed is an Html element with an img inside, it has to be this way because for other reasons the Image element from @react-three/drei does not work with the images I’m providing to the element

2

the blue lines you can use from R3F.

<Line points={[points[0], points[1]]} />

For the text, you can use from R3F.

<Text
      {...fontProps}
      
    >
      Drawers
    </Text>

If the image is inside a HTML from Drei, then you need to get the Vector 3 positions of the corners of the image.

Then, all you need to do is run a line between the points.

3

If you want to orbit around an object in 3D space, here is an example of something I created using three.js text and geometric shapes for the lines and arrows.