The difference between the orthogonal projection of the camera and the camera perspective projection of three.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="../static/three.js-master/build/three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>var renderer;  
                widthfunctionrenderer//
            
            initThree () {= window.innerWidth;  // 宽度
                height = window.innerHeight;  // 长度
                renderer = new THREE.WebGLRenderer({
                    antialias : true  // 设置反锯齿
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            var camera;
            function initCamera() {
                Camera = new new THREE.PerspectiveCamera (45, width / height,. 1, 10000);   // a perspective projection camera 
                // Camera = new new THREE.OrthographicCamera (window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2 , window.innerHeight / - 2, 10, 1000); // orthographic projection camera 
                camera.position.x = 0;   // set the camera coordinate 
                camera.position.y = 0 ; 
                camera.position.z = 600 ; 
                camera. up.x = 0 ; 
                camera.up.y =. 1;   // set the camera on the y-axis direction is 
                camera.up.z = 0 ; 
                camera.lookAt ( 0, 0, 0);   // camera lookAt a certain point in the middle of the screen display: when the use of this point, we can achieve the object moves, we can always track the object, so the object is always the center of the screen 

            } 

            var sCENE;   // create a scene 
            function initScene () { 
                sCENE = new new THREE.Scene (); 
            } 

            var light;   // Create source 
            function initLight () { 
                light = new new THREE.AmbientLight (0xFF0000);   // ambient light source 
                light. position.set (100, 100, 200 is ); 
                scene.add (Light); 

                Light= New new THREE.PointLight (0x00FF00);   //A point light source 
                light.position.set (0, 0,300 ); 
                scene.add (Light); 
            } 

            var Cube;
             function the initObject () {
                 var Geometry = new new THREE.CylinderGeometry (70,100,200);   // create a geometry length width depth 
                var Material's = new new THREE.MeshLambertMaterial ({color: 0xFFFFFF});   // create the look and color settings 
                var Mesh = new new THREE.Mesh (Geometry, Material's);   // the Mesh is a class used to generate the object 
                mesh.position = new new THREE. Vector3 (0,0,0 );
                scene.add(mesh);  // 加到场景
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                animation();

            }
            function animation()
            {
                changeFov();
                renderer.render(scene, camera);
                requestAnimationFrame(animation);  // 循环调用
            }

            function setCameraFov(fov)
            {
                camera.fov = fov;
                camera.updateProjectionMatrix();
            }

            function changeFov()
            {
                var txtFov = document.getElementById("txtFov").value;
                var val = parseFloat(txtFov);
                setCameraFov(val);
            }
        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
        <div>
            Fov:<input type="text" value="45" id="txtFov"/>(0到180的值)
        </div>
    </body>
</html>

Incidental three.js code Download

The above code is the camera perspective projection effect, as shown below:

Orthographic camera

camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );

It is substantially the same size in all directions, no effect of perspective. As shown below:

The difference between the orthogonal projection of the camera and the camera perspective projection of three.js

Guess you like