获取图像在A帧中的画布位置

Question

Right now, I have an A-frame scene with a 360 video mapped onto the inside of a sphere, and I added a few <a-plane> 's, but I wanted to add 2D buttons on the canvas (using plain ol' HTML) next to the <a-plane> (kind of hovering on top of the object). The problem is that the user can click and drag the <a-plane> , so the position in 3D environment will change (and so will the size of the <a-plane> since the image will get warped when you rotate the screen).

Is there any way to find out the xy position of the bounds of the image in the <a-plane> in the canvas element? I have to use the canvas because the is slightly warped when it's at the corner of the screen due to the skewed perspective.

Answer 1

There's a mouse-cursor component that will start a raycaster based on the XY of the mouse. So you can tell when the actual mouse cursor hovers over an object: https://github.com/mayognaise/aframe-mouse-cursor-component

For the raw three.js example, check out https://threejs.org/examples/#webgl_interactive_cubes