I've been experimenting with trying to create a smooth, continuous forward movement for the camera in a three.js/WebVR project, specifically with only a cardboard viewer needed.
After much trial and error, I've discovered that the usual camera movement methods don't seem to work in WebVR, possibly due to the way the perspective camera is handled in this environment.
For example, this code snippet didn't produce the desired effect:
function render() {
camera.translateZ(-0.02);
renderer.render( scene, camera );
}
Instead of moving the camera itself, I tried attaching it to another object and moving that object:
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.add(camera);
...
function render() {
cube.translateZ(-0.02);
cube.rotation.copy(camera.rotation);
renderer.render( scene, camera );
}
While this method partially worked by moving the camera with the cube, the rotation was off. It felt like in order to move eastward while facing north, I had to rotate 180 degrees to face south.
I suspect there might be some confusion between quaternion and euler rotation, or perhaps I'm missing something with vector3 positioning?
Any suggestions or tips would be greatly appreciated!