Trouble with Image Positioning in VR Mode

I’m working on a WebVR project using Three.js and have encountered an issue where the image(light field data) is only visible when the VR headset position is set to (0,0,0)(use WebXR API emulator and the default position is (0,1.6,0)). I’ve tried adjusting various aspects such as the camera, plane, and scene positions, but the problem persists. Specifically, when entering VR mode, the image appears correctly only if the VR headset position is (0,0,0)

I’ve tried:



The issue you’re facing with your WebVR project using Three.js likely stems from the way the VR environment handles object positioning relative to the headset. Here are some potential solutions to try:

Adjust Plane Positioning:
Instead of modifying the scene or camera position, try adjusting the plane itself. Since the image only appears at (0,0,0), set the plane’s position to (0, -1.6, 2). This essentially places the plane in front of the user (assuming the user starts at (0, 1.6, 0)) at a distance of 2 units on the Z-axis.

Inverse Camera Transformation:
Apply the inverse of the camera’s transformation matrix to the plane’s position. This essentially “locks” the plane to the camera’s marykayintouch view regardless of the camera’s position. Libraries like Three.js provide methods to achieve this (e.g., plane.position.applyMatrix4(camera.matrixWorld.inverse)).

VR Object Management:
Consider using libraries like WebVR-Boilerplate [invalid URL removed] that manage VR objects and camera positions. These libraries often handle user positioning and object visibility automatically.

By trying these approaches, you should be able to get your light field data image to display correctly in VR mode regardless of the user’s headset position.

I hope the solution may help you.

Thank you very much! I‘ll try these solutions. Actually I tried:

const planeGeo = new THREE.PlaneGeometry(camsX * cameraGap * 4, camsY * cameraGap * 4, camsX, camsY);
const planePtsGeo = new THREE.PlaneGeometry(camsX * cameraGap * 2, camsY * cameraGap * 2, camsX, camsY);

to expand the size,and it works temporarily.
Thank you again!