Moving Camera

[JohnRodney]

Hey I'm working with some 3d cameras that export .obj and .mtl files. I managed to get it setup to work with the three js loaders (though I had to update the three.js source). Now I'm having issues moving around the scene it doesn't appear that I can just manually update the camera position.

Is there an API to this boilerplate for moving the camera/user through the scene?

[borismus]

John, sounds more like a THREE.js question to me than something VR-specific. You should take a look at THREE.Camera APIs. There's a lot of THREE sample code out there.

[JohnRodney]

@borismus I've manually updated the position by using the camera.position.set() method according to the THREE.js docs and it seems to keep itself right where it was. I did the same code outside of the VR boiler plate and the camera's moved fine.

My temporary workaround is to write a function to translate the entire scene opposite a vector I derive by creating a down vector and applying the THREE.js camera quaternion to it. This isn't ideal as I'd rather just move the camera, but hey working is working.

I appreciate your response and I'm assuming you've manually adjusted the camera position in a VR scene in order to be sure that it is not the VR library. I am working with other technologies as well so it is possible that something else is overriding my changes other than the VR boiler plate.

Anyways thanks for this great repo its been very helpful in getting cardboard, and rift based websites running quickly.

[brianpeiris]

@JohnRodney The boilerplate uses VRControls from Three.js. The controls do set the camera's position, so setting it manually will have no effect. This is due to Three.js more than it is due to the boilerplate, as Boris said. It is normal for most of the Three.js controls to override the camera position.

It is not obvious to novices, but one workaround is to apply the VRControls camera position on top of your manual camera position before rendering the scene, and then reset it after.

Working example:
http://jsbin.com/zaboju/2/edit?html,js,output
http://output.jsbin.com/zaboju/2

Relevant snippet:

var BASE_POSITION  = new THREE.Vector3(-1, -2, 0);
var BASE_QUATERNION  = new THREE.Quaternion().setFromAxisAngle(
  new THREE.Vector3(0, 1, 0),
  -Math.PI / 8
);

var render = function() {
  requestAnimationFrame(render);

  vrControls.update();

  // Store the VR camera transformation
  // temporarily
  var cameraPos = camera.position.clone();
  var cameraQuat = camera.quaternion.clone();

  // Use the manual transformation and apply the
  // VR transformation on top of it.
  var rotatedPos = cameraPos.clone().applyQuaternion(BASE_QUATERNION);
  camera.position.copy(BASE_POSITION).add(rotatedPos);
  camera.quaternion.multiplyQuaternions(BASE_QUATERNION, camera.quaternion);

  vrEffect.render(scene, camera);

  // Reset the camera to the VR transform
  // so that VRControls can pick up where
  // it left off
  camera.position.copy(cameraPos);
  camera.quaternion.copy(cameraQuat);
};

@borismus Maybe this should be part of the example in the boilerplate, since it seems to be one of the first things that users try to do once they get things running. I suggest incorporating FirstPersonControls.

[borismus]

@brianpeiris Thanks for the detailed explanation!

Not sure what you mean about incorporating FirstPersonControls. The polyfill provides virtual PositionalDevices powered by mouse/keyboard which alleviates the need for anything except VRControls. To mitigate the FF issue, we could do a deeper check to see if getVRDevices actually returns any VR devices.

[brianpeiris]

@borismus I meant the example should allow users to move around with WASD while they are in VR mode with a VR device on.