Three.js(3) Camera

原創

NOCIS

2018-09-05 00:15

相機

透視投影相機THREE.PerspectiveCamera
正投影相機THREE.OrthographicCamera

透視投影，有一個基本點，就是遠處的物體比近處的物體小。

正投影，遠近高低比例都相同。

1.正投影相機

OrthographicCamera（left，right，top，bottom，near，far）

left：左平面距離相機中心點的距離
right：右平面距離相機中心點的距離
top：頂平面距離相機中心點的距離
bottom：底平面距離相機中心點的距離
near：近平面距離相機中心點的距離
far：遠平面距離相機中心點的距離`

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );//將瀏覽器窗口的寬度和高度作爲了視景體的高度和寬度，相機正好在窗口的中心點上

scene.add( camera );

2.透視相機

PerspectiveCamera( fov, aspect, near, far )

視角fov
縱橫比aspect：實際窗口的縱橫比，即寬度除以高度。
近平面near
遠平面far

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

scene.add( camera );

3.實例和比較

左邊爲透視相機，右邊爲正投影相機

下面代碼可以測試不同FOV時透視相機的顯示

   function animation()
        {
            //renderer.clear();
            //camera.position.x =camera.position.x +1;
            //mesh.position.x-=1;
            changeFov();//變角
            renderer.render(scene, camera);
            requestAnimationFrame(animation);

            stats.update();
        }
        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>