Using TrackballControls with two scenes

Question

I am implementing a model viewer in three.js with an overlay as two scenes. Objects in the main scene are controlled using TrackballControls. Objects in the overlay scene are projected using a separate camera not controlled by any of the control classes. I do this in order to allow objects in the main scene to zoom, rotate and pan and objects in the overlay scene to simulate rotation (by redrawing the objects as nothing beyond a plane parallel to the xy axis should be displayed). I render the two scenes successively like so:

this.renderer.render(this.scene, this.camera);
this.renderer.clear(false, true, false); 
this.renderer.render(this.overlayScene, this.overlayCamera);

That works fine for the most part. The issue I'm having is that when I redraw the objects in the overlay scene, it gets out of sync with the rotation in the main scene. I tried using TrackballControls in the overlay scene, but that seemed to make it harder to redraw the objects. Is there a better approach than using two scenes to accomplish the same goals? If using two scenes is the best approach, how can I keep the two scenes in sync?

If I understand your problem right, I once had the same problem. I solved it by having two scenes but for the second scene, the camera is static and in the same start position as the main scene camera. Now, when the cam from the main scene is moved by whatever controls you use, check in your overlay scene if the control object's (cam) rotation equals the overlay scene cam rotation. if not, I used newMat4.extractRotation() to get the rot-matrix of the mainCam and then transposed this rotation matrix. I then used obj.setFromRotationMatrix on the object(s) i want to rotate in an INVERSE manner. — GuyGood

GuyGood GuyGood · Accepted Answer · 2014-02-10T09:27:40

If I understand your problem right, I once had the same problem. I solved it by having two scenes but for the second scene, the camera is static and in the same start position as the main scene camera. Now, when the cam from the main scene is moved by whatever controls you use, check in your overlay scene if the control object's (cam) rotation equals the overlay scene cam rotation. if not, I used rotMatrix.extractRotation() to get the rotation-matrix of the mainCam (Three.Matrix4()) and then transposed this rotation matrix. I then used obj.setFromRotationMatrix on the object(s) i want to rotate in an INVERSE manner:

 if ( !controls.object.rotation.equals(camRot) )
    camRot.copy( controls.object.rotation);
    rotMatrix.extractRotation(controls.object.matrix);
    rotMatrix.transpose();
    someObject.rotation.setFromRotationMatrix(rotMatrix);

where

var camRot = new THREE.Euler();
var rotMatrix = new THREE.Matrix4();

is. Not sure if there is an easier solution or if the math is somewhat wrong in some edge cases but this way, my scenes stay in sync and everything works for me :)

Using TrackballControls with two scenes

1 Answers