I've been working on a 3D viewer application, and got into a little trouble with webxr and threejs scene rendering.
I have a simple sphereGeometry around the camera that has a cubemap image stretched over it, to create a 3D viewing experience. After switching to WebXR mode, I'd like a plane to follow the user's rotation, basically to stay in view all the time. This would be the initial state of the menu, and the user can minimize/maximize it later if needed, via gaze tracking.
My issue is, that I have a hard time making sure the plane stays in sight at all times.
I'm using the XRSession's requestAnimationFrame to update everything according to the camera movement, based on an online tutorial. The scene is completely viewable, so I'm guessing the transformations based on the tutorial work well.
In the render cycle I tried updating the plane's position based on the camera's worldDirection like so:
var direction = new THREE.Vector3();
var position = new THREE.Vector3();
camera.getWorldDirection(direction);
camera.getWorldPosition(position);
plane.position.copy(position.clone().add(direction.multiplyScalar(3)));
plane.lookAt(position);
Unfortunately this only causes the plane to move ever so slightly, and not in a way that it stays in view all the time.
Any nudge in the right direction would be greatly appreciated!
The original problem to the situation in question was not with the transformation of the plane, but how the scene was moved when the camera was rotated. So the above code works, but I made a mistake of applying the camera's matrixWorldInverse to the whole scene, which included the plane as well. Transforming it into a place where it should not have been. Without that, the code works as expected.