I’m trying to place clickable annotations made with DOM elements on objects in the 3d scene.
It works for the normal “non-ar” view, but as soon as I start the AR mode (by clicking on one of the circles) they are placed slightly above the red/blue spheres in the corners of the cube and do not align perfectly like in the desktop view.
It seems to get worse if the cube is placed in the distance and the annotations are above the actual spheres.
This also happens with a raycaster (It is also visible in the demo, just click somewhere to update the ray)
Here are the things I tried so far:
- Adjusting the renderer size based on the BoundingClientRect
- Setting the fov to 50, so the perspective camera and the renderer.xr camera are the same
- Adjusting the canvas size based on the window.innerWidth/Height
If someone has an idea, feel free to get in touch with me