Three.js: OrthographicCamera and near Plane

Created on 14 Feb 2019 · 10Comments · Source: mrdoob/three.js

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

[x] All of them
[ ] Chrome
[ ] Firefox
[ ] Internet Explorer

OS

[x] All of them
[ ] Windows
[ ] macOS
[ ] Linux
[ ] Android
[ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

Help (please use the forum)

Source

ua4192

Most helpful comment

It is working correctly.

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

WestLangley on 14 Feb 2019

👍3

All 10 comments

Here a jsfiddle showing the issue
https://jsfiddle.net/hxkavzj6/

ua4192 on 14 Feb 2019

Please use the forum or stackoverflow for help requests.

Mugen87 on 14 Feb 2019

Hi.

Can you tell me why this is not considered as a bug\issue?

The camera is not frusting in the near plane as expected.

Did you checked it?

I don't mind to open a question in the forum, I din't because I though this was an issue.

Best regards

ua4192 on 14 Feb 2019

@ua4192 please, provide a working jsfiddle clearly showing the issue when reporting a bug.

mrdoob on 14 Feb 2019

Oh, never mind, you did it in another post.

mrdoob on 14 Feb 2019

Just to clarify the issue...

The issue reported is that objects that are outside of the near and far range (correctly) disappear when using PerspectiveCamera but not when using OrtographicCamera.

PerspectiveCamera: https://jsfiddle.net/k9gzo85q/
OrthographicCamera: https://jsfiddle.net/t2zqmr8x/

mrdoob on 14 Feb 2019

@WestLangley is that the expected behaviour?

mrdoob on 14 Feb 2019

It is working correctly.

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

WestLangley on 14 Feb 2019

👍3

Many thanks.

I wasn't aware of this.

Now I understand why I should ask for help in the forum.

Best regards