OrthographicCamera and near Plane

Description of the problem

I am working with an orthographicCamera in my Scene.
I set the camera in this way:

ortographicCamera = new THREE.OrthographicCamera( canvas_w / - 2, canvas_w / 2, canvas_h / 2, canvas_h / - 2, 0.1, 1000000 );

I am also using an OrbitControls which I set in this way:

controls = new THREE.OrbitControls( ortographicCamera , renderer.domElement );
controls.addEventListener( 'change', render );

My problem is simple, when I move the camera using orbitControls I always see objects which shouldn’t be visible because the are back of near frustum plan of my camera.

I have tested multiple versions of three.js and I have obtained the same results.

If I use a PerspectiveCamera it works as expected and objects back of my frustum are not shown.

I have tried to change values in my orthographicCamera without any progress.

I think there is an issue with OrthographicCamera and Near Frustum plane.

You can try the following code, orbit the camera and you will realize that objects that should be frsuted by near Plane are not.

<!DOCTYPE html>
<html lang="en">
	<head><base href="./three.js/examples/" target="_blank">
		<title>three.js webgl - orbit controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #000;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;

				background-color: #fff;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				color:#000;
				position: absolute;
				top: 0px; width: 100%%;
				padding: 5px;

			}

			a {
				color: red;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
		<div id="info">
			<a href="http://threejs.org" target="_blank">three.js</a> - orbit controls example
		</div>

		<script src="../build/three.js"></script>

		<script src="js/controls/OrbitControls.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var stats;

			var camera, controls, scene, renderer;
			var frustumSize = 1000;
			init();
			render(); // remove when using next line for animation loop (requestAnimationFrame)
			//animate();

			function init() {

				scene = new THREE.Scene();
				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

				renderer = new THREE.WebGLRenderer();
				renderer.setClearColor( scene.fog.color );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				var container = document.getElementById( 'container' );
				container.appendChild( renderer.domElement );

              	var aspect = window.innerWidth / window.innerHeight;
				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
              
				//camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.z = 500;

				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.addEventListener( 'change', render ); // remove when using animation loop
				// enable animation loop when using damping or autorotation
				//controls.enableDamping = true;
				//controls.dampingFactor = 0.25;
				controls.enableZoom = true;

				// world

				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
				var material =  new THREE.MeshPhongMaterial( { color:0xffffff, shading: THREE.FlatShading } );

				for ( var i = 0; i < 500; i ++ ) {

					var mesh = new THREE.Mesh( geometry, material );
					mesh.position.x = ( Math.random() - 0.5 ) * 1000;
					mesh.position.y = ( Math.random() - 0.5 ) * 1000;
					mesh.position.z = ( Math.random() - 0.5 ) * 1000;
					mesh.updateMatrix();
					mesh.matrixAutoUpdate = false;
					scene.add( mesh );

				}

				// lights

				light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 1, 1, 1 );
				scene.add( light );

				light = new THREE.DirectionalLight( 0x002288 );
				light.position.set( -1, -1, -1 );
				scene.add( light );

				light = new THREE.AmbientLight( 0x222222 );
				scene.add( light );

				//

				stats = new Stats();
				container.appendChild( stats.dom );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true

				stats.update();

				render();

			}

			function render() {

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>

Best regards

Three.js version
  • Dev
  • r101
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “OrthographicCamera and near Plane

  1. It is working correctly.

    When using an orthographic camera with OrbitControls, the camera is not moving (dollying) when zooming; camera.zoom is changed, instead.

Comments are closed.