How to set initial camera position (Three.js/VR)? - three.js

Question

If I do not set initial position to the camera, the WEB borwser and Oculus Go browser behave differently (see images below).
const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
// camera position is Vector3(0, 0, 0)
scene.add( camera );
Pic. 1 - Initial camera position in web browser (e.g. Google Chrome)
Pic. 2 - Initial camera position in VR browser (e.g. default browser of Oculus Go)
It looks like Three.js's scene knows in which environment it runs and automatically adjust the camera position. How can I change the initial position of the camera?
Currently, I am doing somethink like this:
const cameraHolder = new Group();
cameraHolder.add(camera);
cameraHolder.position.set(0, 1, 0);
scene.add(cameraHolder);
but again, it doesn't resolve the issue with different positions in different environments.

Answer 1

I believe this is the behaviour of the reference space. If you use reference space type of *-floor the device knows about how tall you are. The camera y is then set to your device y position, which makes sense. As I couldn't find where to grab the device height from I just set the reference space type to local.
this.renderer.xr.setReferenceSpaceType( 'local' );
For me the scene.add(cameraHolder) was necessary, otherwise the camera wouldn't receive the position/rotation. Old HMDs had the cameras attached to a "head" model, then you would turn the head instead of the camera.

Answer 2

You can use
renderer.xr.addEventListener()
Example
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);
});