如何设置初始相机位置（Three.js/VR）？答案

【问题标题】：How to set initial camera position (Three.js/VR)?如何设置初始相机位置（Three.js/VR）？
【发布时间】：2019-05-29 04:10:30
【问题描述】：

如果我没有为相机设置初始位置，WEB borwser 和 Oculus Go 浏览器的行为会有所不同（见下图）。

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
// camera position is Vector3(0, 0, 0)
scene.add( camera );

图片。 1 - 网络浏览器（例如 Google Chrome）中的初始相机位置

图片。 2 - VR 浏览器中的初始相机位置（例如 Oculus Go 的默认浏览器）

看起来Three.js的场景知道它在哪个环境中运行并自动调整相机位置。如何更改相机的初始位置？

目前，我正在做这样的事情：

const cameraHolder = new Group();

cameraHolder.add(camera);
cameraHolder.position.set(0, 1, 0);

scene.add(cameraHolder);

但同样，它并不能解决不同环境中不同位置的问题。

【问题讨论】：

你有这个错误的工作示例吗？此外，您不必将相机添加到场景层次结构中。你可以简单地改变它的位置而不用scene.add(camera)

标签： three.js virtual-reality perspectivecamera oculusgo

【解决方案1】：

你可以使用

renderer.xr.addEventListener()

示例

camera = new THREE.PerspectiveCamera(35, width / height, 1, 15);
camera.position.set(0, 0.6, 3); // Set the initial Camera Position.

const cameraGroup = new THREE.Group();
cameraGroup.position.set(0, -1, 1.5);  // Set the initial VR Headset Position.

//When user turn on the VR mode.
renderer.xr.addEventListener('sessionstart', function () {
    scene.add(cameraGroup);
    cameraGroup.add(camera);
});
//When user turn off the VR mode.
renderer.xr.addEventListener('sessionend', function () {
    scene.remove(cameraGroup);
    cameraGroup.remove(camera);
});

【讨论】：

【解决方案2】：

我相信这是参考空间的行为。如果您使用*-floor 的参考空间类型，则设备会知道您的身高。然后将相机 y 设置为您的设备 y 位置，这是有道理的。因为我找不到从哪里获取设备高度，所以我只是将参考空间类型设置为本地。

this.renderer.xr.setReferenceSpaceType( 'local' );

对我来说scene.add(cameraHolder) 是必要的，否则相机将无法接收位置/旋转。旧的 HMD 将摄像头连接到“头部”模型，然后你会转动头部而不是摄像头。

【讨论】：