Flip between PerspectiveCamera & OrthographicCamera gets wrong rotation

The code:

function to_Orthographic() {
	console.log("to_Orthographic before camera rotate", camera.rotation);
	var lookAt = get_lookup(camera);
	var factor = calc_zoom(obj);

	orthographicCamera = new THREE.OrthographicCamera( width / -factor, width / factor, height / factor, height / -factor, 0.1, 1000 );
	orthographicCamera.position.copy(camera.position);
	orthographicCamera.rotation.copy(camera.rotation);

	camera = orthographicCamera;
	controls = new ArcballControls(camera, renderer.domElement);
}

function to_Perspective() {

	prespectiveCamera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 1000 );
	prespectiveCamera.position.copy(camera.position);
	prespectiveCamera.rotation.copy(camera.rotation);

	camera = prespectiveCamera;
	controls = new ArcballControls(camera, renderer.domElement);]
}

.....
var controller = new function() {

   this.Perspective = function  () {
		to_Perspective();
		
   };
   this.Orthographic = function () {
		to_Orthographic();
   }
	   
}
var gui = new GUI();
gui.add(controller, 'Perspective');
gui.add(controller, 'Orthographic');

You probably want to copy the quaternion, not the rotation.

You are making a new camera and controller each time you switch. Might be better storing both cameras and having a currentCamera member/variable that you use to toggle.

1 Like