Threejs之二:相機詳解

透視投影相機(THREE.PerspectiveCamera)

所謂透視投影相機(PerspectiveCamera),基本等同於人的眼睛,意思就是:離的遠的物體會顯得比較小,近處的物體會比較大.
透視投影相機的構造函數:

PerspectiveCamera(fov,aspect,near,far)複製代碼

根據上圖來理解透視投影相機的4個參數:

1. for:我理解爲眼睛睜開的角度即視野的大小,若是設置爲0則表示你閉上了眼睛,因此什麼都看不到;通常狀況下來講設置爲45°-60°是最佳的效果.
2. aspect:實際窗口的縱橫比(width/height),即寬度除以高度,是照相機水平方向和垂直方向的長度比值,一般設爲canvas的寬高比.
3. near:表示近處裁面的距離

   實例說明:

   var scene, camera, renderer, cube;
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.position.set(0, 0, 5);
    scene.add(camera);
    cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshBasicMaterial({
                color: 0xff0000,
                wireframe: true
            })
    );
    scene.add(cube);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, camera);複製代碼

   獲得下圖的結果:
   

   

   
   經過透視投影相機咱們能夠看到正方體的全部線條,有遠近大小的效果,你能夠經過改變fov視角的度數來觀察效果(視角越大物體越小).

正投影相機(THREE.OrthographicCamera)

正投影相機的構造函數:
OrthographicCamera(left,right,top,bottom,near,far)

正投影相機的六個參數,分別表明相機拍攝到的空間的六個面的位置,這六個平面圍成一個長方體,這個長方體也叫視景體(Frustum).只有在視景體內部（下圖中的灰色部分）的物體纔可能顯示在屏幕上，而視景體外的物體會在顯示以前被裁減掉.爲了保持照相機的橫豎比例，須要保證(right - left)與(top - bottom)的比例與Canvas寬度與高度的比例一致。

實例說明

var scene, camera, renderer, cube;
    scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
    camera.position.set(0, 0, 5);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    scene.add(camera);
    cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshBasicMaterial({
                color: 0xff0000,
                wireframe: true
            })
    );
    scene.add(cube);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, camera);複製代碼

獲得以下結果:

因爲前面的邊覆蓋了後面的邊,致使咱們看到的是一個正方形.
你能夠經過改變相機每一個平面的參數來理解每一個參數的實際做用.
固然,你也能夠經過監聽鍵盤事件來改變相機的位置實現一個動態的場景:

document.addEventListener('keydown', function (event) {
        switch (event.keyCode) { 
            case 37:
                camera.position.x -= 0.1;
                break; 
            case 38:
                camera.position.y -= 0.1;
                break; 
            case 39:
                camera.position.x += 0.1;
                break; 
            case 40:
                camera.position.y += 0.1;
                break;
        }
        renderer.render(scene, camera);
    });複製代碼

以上就是Threejs中的兩種相機用法以及它們的區別,感興趣的同窗能夠關注我,我會就Threejs的各類用法持續更新的.