2

I use Three.js to render and move (my orbitControl changes camera.position) in a small scene.
Now I have an oculus rift. So I added VRControls and VREffect.
There is no problem to move the head.
But I can no more move in the scene because VRControls override the camera parameters : 

object.quaternion.copy( state.orientation ); // object is the camera

I thought that it was easy to correct : I have only to update the camera instead of overriding it :

object.quaternion.copy(stateOrientationQuat.multiply(currentCameraQuat));

But it does not work : it renders a moving flicking scene. VRControls and orbitControl seem to fight...

Could you tell me what is to do to integrate VRControls in an existing project ? If you have the update code (I don't really know quaternions...) it would very help.

Thanks

Improve this question

2 Answers 2

Reset to default
6

Edit: See my other answer for a better method.

You can combine both controls by creating a VRControls instance that acts on a fake camera and then apply the transform on top of the orbit controls:

Relevant snippet:

var orbitControls = new THREE.OrbitControls(camera);

// Store the position of the VR HMD in a dummy camera.
var fakeCamera = new THREE.Object3D();
var vrControls = new THREE.VRControls(fakeCamera);

...

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

  orbitControls.update();
  vrControls.update();

  // Temporarily save the orbited camera position
  var orbitPos = camera.position.clone();

  // Apply the VR HMD camera position and rotation
  // on top of the orbited camera.
  var rotatedPosition = fakeCamera.position.applyQuaternion(
    camera.quaternion);
  camera.position.add(rotatedPosition);
  camera.quaternion.multiply(fakeCamera.quaternion);

  vrEffect.render(scene, camera);

  // Restore the orbit position, so that the OrbitControls can
  // pickup where it left off.
  camera.position.copy(orbitPos);
};

Full example:

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var vrEffect = new THREE.VREffect(renderer, function () {});

var camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000);

var orbitControls = new THREE.OrbitControls(camera);

// Store the position of the VR HMD in a dummy camera.
var fakeCamera = new THREE.Object3D();
var vrControls = new THREE.VRControls(fakeCamera);

var scene;
var createScene = function () {
  scene = new THREE.Scene();

  scene.add(new THREE.PointLight());

  var cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshLambertMaterial({
      color: 'green'
    })
  );
  cube.position.set(-1, -2, -5);
  scene.add(cube);
  orbitControls.target = cube.position;

  for (var i = 0; i < 10; i++) {
    cube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshLambertMaterial()
    );
    cube.position.set(
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20
    );
    scene.add(cube);
  }
};
createScene();

var render = function() {
  requestAnimationFrame(render);
  
  orbitControls.update();
  vrControls.update();
  
  // Temporarily save the orbited camera position
  var orbitPos = camera.position.clone();
  
  // Apply the VR HMD camera position and rotation
  // on top of the orbited camera.
  var rotatedPosition = fakeCamera.position.applyQuaternion(
    camera.quaternion);
  camera.position.add(rotatedPosition);
  camera.quaternion.multiply(fakeCamera.quaternion);
  
  vrEffect.render(scene, camera);
  
  // Restore the orbit position, so that the OrbitControls can
  // pickup where it left off.
  camera.position.copy(orbitPos);
};

render();

window.addEventListener('resize', function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  vrEffect.setSize( window.innerWidth, window.innerHeight );
}, false );
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/examples/js/effects/VREffect.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/examples/js/controls/VRControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/examples/js/controls/OrbitControls.js"></script>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Wow ! I could not have imagined an answer as complete ! The code is simple but I would not have had the idea of the fake camera. Your answer should be in the VRControls documentation. Many thanks !
A comment on this now "deprecated" answer : on a project I had to save temporarily the orbited camera quaternion too. I think that it is needed isn't it ?
3

I've realized there's a cleaner way to do this. You can create a "dolly" camera and add the VR camera as a child. Then you can have the OrbitControls control the dolly and have the VRControls control the actual camera without resorting to messy calculations.

Relevant snippet:

var camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000);
var vrControls = new THREE.VRControls(camera);

var scene = new THREE.Scene();

// The dolly has to be a PerspectiveCamera, as opposed
// to a simple Object3D, since that's what
// OrbitControls expects.
var dollyCam = new THREE.PerspectiveCamera();
var orbitControls = new THREE.OrbitControls(dollyCam);
dollyCam.add(camera);
scene.add(dollyCam);

...

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

  orbitControls.update();
  vrControls.update();

  vrEffect.render(scene, camera);
};

Full example:

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var vrEffect = new THREE.VREffect(renderer);

var camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000);
var vrControls = new THREE.VRControls(camera);
var orbitControls;

var scene;
var createScene = function () {
  scene = new THREE.Scene();

  // The dolly has to be a PerspectiveCamera, as opposed
  // to a simple Object3D, since that's what
  // OrbitControls expects.
  var dollyCam = new THREE.PerspectiveCamera();
  orbitControls = new THREE.OrbitControls(dollyCam);
  dollyCam.add(camera);
  scene.add(dollyCam);

  scene.add(new THREE.PointLight());

  var cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshLambertMaterial({
      color: 'green'
    })
  );
  cube.position.set(-1, -2, -5);
  scene.add(cube);
  orbitControls.target.copy(cube.position);

  for (var i = 0; i < 10; i++) {
    cube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshLambertMaterial()
    );
    cube.position.set(
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20
    );
    scene.add(cube);
  }
};
createScene();

var render = function() {
  requestAnimationFrame(render);
  
  orbitControls.update();
  vrControls.update();
  
  vrEffect.render(scene, camera);
};

render();

window.addEventListener('resize', function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  vrEffect.setSize( window.innerWidth, window.innerHeight );
}, false );
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/examples/js/effects/VREffect.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/examples/js/controls/VRControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/examples/js/controls/OrbitControls.js"></script>

Improve this answer

1 Comment

I'm unable to get the VRControls working with the code above on both Android and iOS. OrbitControls (mouse and touch) seem to be working fine though. Is this working for you still?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.