In Three.js, while using WebVR, how do I move the camera position?

Question

I'm trying to adapt my existing three.js project to work with WebVR. I've made decent progress -- I can look around the scene in VR, but I'm unable to move the camera position away from the initial place it gets spawned (which appears to be close to 0,0,0, it seems like there is a predefined userHeight that gets factored in)

Once I call renderer.vr.setDevice( vrDisplay ) it seems like a new camera is created and the existing camera that my scene was using is no longer used. I'd like to keep using that camera, or at least inherit most of its properties.

I've noticed that there is a renderer.vr.getCamera() method (link to source) but I haven't found any examples or documentation of how to use it (or if I should use it). Curiously, this method accepts a camera as an argument, which is a bit unintuitive for a getter. Looking at the code, it seems like the function should be called setCamera and left me a bit confused. I tried calling the function and passing in my existing camera but it had no effect.

Any help is appreciated. I am using a Google Daydream View on the latest version of Android/Chrome using Three.js R91

Protagonist

Answer here: https://mcmap.net/q/1915109/-unable-to-change-camera-position-when-using-vrcontrols – Thessalonians

Answer 1

swirlybuns, Mugen87 solution works as long as you add user to the scene

var user = new THREE.Group();
user.position.set(0,0,0);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 1.6;
user.add( camera );
scene.add(user);

and on render loop

user.position.setZ(camera_z_pos);
camera_z_pos -= current_velocity;

Tested on Three.js v102 chrome mobile v75

Zaneta