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

Question

如果我不为相机设置初始位置，Web浏览器和Oculus Go浏览器会有不同的表现（详见下面的图片）。

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

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

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

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

目前，我的做法类似于这样：

const cameraHolder = new Group();

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

scene.add(cameraHolder); 

但是，这仍然无法解决在不同环境中位置不同的问题。

- Roman Mahotskyi

---

你有这个 bug 的工作示例吗？此外，您不必将相机添加到场景层次结构中。您可以在没有 scene.add(camera) 的情况下更改其位置。 - M -

Answer 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);
});

- Jae-sung Jun

Answer 2

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

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

对我来说，scene.add(cameraHolder) 是必要的，否则相机将无法接收位置/旋转信息。旧的头戴式显示器将相机附加到“头”模型上，然后您需要转动头部而不是相机。

- Skadi2k3