Three.js WebVR开发：如何移动相机位置及保留原有自定义相机？

嘿，我之前在适配Three.js项目到WebVR时也遇到过一模一样的问题——VR模式下原相机好像“失效”了，初始位置被钉在0,0,0附近还带着默认的userHeight。下面是我亲测有效的解决方法：

核心思路：用父容器控制全局位置，VR相机负责头部姿态 #

Three.js的WebVR渲染器会创建一个专门的VR相机来处理设备的头部追踪，但你完全可以把这个VR相机挂在你原有的相机（或者一个自定义的Object3D容器）下面，这样：

• 你的原相机/容器负责全局位置和整体移动逻辑
• VR相机只处理VR设备传来的头部旋转和本地位置（比如userHeight）

具体步骤 #

1. 保留你的原相机设置
   不用改动你原项目里的相机初始化代码，比如你原来的相机是这样的：

   const mainCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   mainCamera.position.set(3, 2, 8); // 你想要的初始位置
   scene.add(mainCamera);
   

2. 关联VR相机和原相机
   启用VR后，获取WebVR渲染器的VR相机，把它作为原相机的子节点：

   renderer.vr.enabled = true;
   const vrCamera = renderer.vr.getCamera();
   mainCamera.add(vrCamera); // 让VR相机成为原相机的子节点
   

3. （可选）移除默认的userHeight偏移
   如果你不想让VR系统自动给相机加上userHeight（默认是1.6米左右），直接把这个参数设为0：

   renderer.vr.userHeight = 0;
   

   这样你就可以完全通过mainCamera.position.y来控制相机的高度了。

4. 渲染逻辑保持不变
   依然使用你的原相机作为渲染参数：

   function animate() {
       renderer.setAnimationLoop(animate);
       renderer.render(scene, mainCamera);
   }
   animate();
   

额外小贴士 #

• 如果你的原相机用了轨道控制器（OrbitControls），记得在VR模式下禁用它，避免冲突：

  window.addEventListener('vrdisplaypresentchange', () => {
      controls.enabled = !renderer.vr.isPresenting;
  });
  

• 如果你不需要保留原相机的全部逻辑，也可以用一个空的Object3D作为容器，效果是一样的：

  const cameraContainer = new THREE.Object3D();
  cameraContainer.position.set(3, 2, 8);
  scene.add(cameraContainer);
  cameraContainer.add(vrCamera);
  

这样操作后，你原有的相机位置控制逻辑完全保留，VR设备只负责头部的环视，完美解决你的问题！

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