How to map position in a sprite to browser viewport?

Questions
1

I have a sprite where a fabricjs is loaded as texture
In fabricjs I have 2 rectangle objects (rect0 at position x0,y0, rect1 at position x1,y1) relative to the topLeft of the canvas
When clicking on one of the rectangles, fabricjs recognizes and sets the appropriate rect as the active object.
Now, I have an iframe which I want to overlay at the active object position.
So I need to map the position of e.g. x0,y0 relative to the browser viewpoint.
How can I do this taking into account that the threejs camera may be zoomed in, and panned?

Thanks

2

That quest may start here: three.js docs
Once you have the point (rect0’s position) in NDC space.. you multiply it by the threejs viewport/canvas size.. and offset by the elements position… (you may have to flip the Y as well.. don’t recall off the top of my head..)

1 Like