Switch between orthographic and perspective Camera

Questions
1

Hi.

I have a strange problema by switching between a perspective Camera and an Orthographic camera.
I am also using a orbitControls.

I don’t know why, but when I try to switch the view doesn’t change and my orbitControl gets unresponsive.

Here my global variable section:

Here my init function:

function init() {
        perspectiveCamera = new THREE.PerspectiveCamera( 45, canvas_w / canvas_h, 10, 20000 );
	perspectiveCamera.up = new THREE.Vector3(0,0,1);
	orthographicCamera = new THREE.OrthographicCamera( canvas_w / - 2, canvas_w / 2, canvas_h / 2, canvas_h / - 2, -1000000, 1000000 );
       orthographicCamera.up = new THREE.Vector3(0,0,1);
       activeCamera = perspectiveCamera;
       oControls = new THREE.OrbitControls( activeCamera, webGl2Renderer.domElement );

}

Here the switchCamera function:

        function callSwtich2Camera(val) {
		var cameraPosition = activeCamera.position.clone();
		var cameraMatrix =  activeCamera.matrix.clone();
		var oControlsTarget = oControls.target.clone();
		var oControlsPosition = oControls.position0.clone();
		//webGl2Renderer.setRenderTarget( null );
		//webGl2Renderer.clear();
		//gl.clear( gl.COLOR_BUFFER_BIT );
		if (val == false) {
			console.log("Swtiching to Perspective");
			isOrtographic = false;
			console.log("cameraPosition", cameraPosition);
			activeCamera = perspectiveCamera;
			activeCamera.position.copy(cameraPosition);
			activeCamera.matrix.copy(cameraMatrix);
			console.log("activeCamera", activeCamera);
		} else {
			console.log("Swtiching to Ortographic");
			isOrtographic = true;
			console.log("cameraPosition", cameraPosition);
			activeCamera = orthographicCamera;
			activeCamera.position.copy(cameraPosition);
			activeCamera.matrix.copy(cameraMatrix);
			console.log("activeCamera", activeCamera);
		}
		activeCamera.updateProjectionMatrix();
		oControls.object = activeCamera;
		oControls.update();
		console.log("oControls", oControls);
		render();
	}

And finally the render function:

       function render() {
		webGl2Renderer.render( glScene, activeCamera );
	}

In my switchCamera function I have tried many thing but always the switch only Works for the original camera type selected. I mean, if I select like in the example a perspective camera, the switch to orthographic doesn’t work but if I switch again to perspective it Works.

2

Hi again.

The most strange thing is that on a simple Scene the function is working for me:

You can see it on this fliddle:
https://jsfiddle.net/2Lackpev/

Best regards

3

It’s not, at least for me. I’ve got this error message:
ReferenceError: switchCamera is not defined
in the console, when I try to use that checkbox in dat.GUI

4

Hi.

Please, try the last fidlle I pubished and you will see that in a simple scene it Works.
In the other hand, using WEBG2 and Shaders it seems that it doesn’t.

Here my fiddle showing the issue:
https://jsfiddle.net/u4y7103a/7/

Best regards

5

Hi.

I think that the problem is linked to in the fiddle it doesn’t work I am using a RawShaderMaterial with vertex and fragment shaders.

Or maybe I am missing something, I don’t know.

Any clues?

Best regards.

6

Sorry.

The problem still remains.

I was opening the good simple scene fiddle.

It continues not working.

You can see the issue at

Best regards

7

See Camera perspective <-> orthographic toggle comparison in r3f and three.js · GitHub for a working implementation.