Merge pull request #11678 from WestLangley/dev-canvas_ortho

Canvas example: corrected OrthographicCamera constructor args

examples/canvas_camera_orthographic.html

@@ -26,6 +26,7 @@
 
 			var container, stats;
 			var camera, scene, renderer;
+			var frustumSize = 1000;
 
 			init();
 			animate();
@@ -43,10 +44,9 @@
 				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orthographic view';
 				container.appendChild( info );
 
-				camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );
-				camera.position.x = 200;
-				camera.position.y = 100;
-				camera.position.z = 200;
+				var aspect = window.innerWidth / window.innerHeight;
+				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000 );
+				camera.position.y = 400;
 
 				scene = new THREE.Scene();
 
@@ -110,10 +110,12 @@
 
 			function onWindowResize() {
 
-				camera.left = window.innerWidth / - 2;
-				camera.right = window.innerWidth / 2;
-				camera.top = window.innerHeight / 2;
-				camera.bottom = window.innerHeight / - 2;
+				var aspect = window.innerWidth / window.innerHeight;
+
+				camera.left   = - frustumSize * aspect / 2;
+				camera.right  =   frustumSize * aspect / 2;
+				camera.top    =   frustumSize / 2;
+				camera.bottom = - frustumSize / 2;
 
 				camera.updateProjectionMatrix();
 
@@ -137,8 +139,8 @@
 
 				var timer = Date.now() * 0.0001;
 
-				camera.position.x = Math.cos( timer ) * 200;
-				camera.position.z = Math.sin( timer ) * 200;
+				camera.position.x = Math.cos( timer ) * 800;
+				camera.position.z = Math.sin( timer ) * 800;
 				camera.lookAt( scene.position );
 
 				renderer.render( scene, camera );