ThreeJS VR：如何将物体精准定位在左眼镜头前方

你手动调整偏移量的问题在于不同VR设备的眼间距（IPD）、镜头位置都有差异，固定数值无法适配所有设备，而且Three.js的XR相机系统有专门的API可以直接获取左眼相机的位置信息，不用主观调试。

下面两种方法可以实现精准定位：

方法一：直接将物体挂载到左眼相机 #

当XR会话激活后，Three.js会为双眼创建独立的相机实例。你可以直接把物体添加到左眼相机的子对象列表中，这样物体就会始终跟随左眼镜头的位置，天然保持在正前方：

// 基础初始化
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

// 创建需要定位的物体
const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const object = new THREE.Mesh(geometry, material);

// 监听XR会话启动事件，挂载物体到左眼相机
renderer.xr.addEventListener('sessionstart', () => {
  const xrCamera = renderer.xr.getCamera(camera);
  // 获取左眼相机（0对应左眼，1对应右眼）
  const leftEyeCamera = xrCamera.getCamera(0);
  leftEyeCamera.add(object);
  // 设置物体在左眼镜头前方1个单位的位置
  object.position.set(0, 0, -1);
});

// 渲染循环
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

方法二：获取左眼相机偏移量，应用到主相机子对象 #

如果需要保持物体挂载在主相机下，可以在渲染循环中动态获取左眼相机相对于主相机的局部位置偏移，然后将这个偏移量应用到物体上：

// 基础初始化（同方法一，省略重复代码）
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

const object = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
camera.add(object);

const leftEyeOffset = new THREE.Vector3();

// 渲染循环中动态更新偏移
renderer.setAnimationLoop(() => {
  const xrCamera = renderer.xr.getCamera(camera);
  if (xrCamera) {
    const leftEyeCamera = xrCamera.getCamera(0);
    // 将左眼相机的世界坐标转换为主相机的局部坐标，得到偏移量
    xrCamera.worldToLocal(leftEyeOffset.copy(leftEyeCamera.position));
    // 设置物体位置：偏移量 + 左眼前方1单位
    object.position.copy(leftEyeOffset).setZ(-1);
  }
  renderer.render(scene, camera);
});

关键说明 #

• 必须在XR会话启动后（sessionstart事件触发后）才能获取到有效的左右眼相机实例，这也是你之前尝试获取内部相机失败的核心原因——会话未激活时，这些相机还未被创建。
• 两种方法都能适配不同VR设备的硬件参数，无需手动调试固定偏移值，确保物体始终精准位于左眼镜头正前方。

内容的提问来源于stack exchange，提问作者yuxy