Threejs之二:相機詳解

勿忘初心夢於歌發表於2019-03-01
JS

透視投影相機(THREE.PerspectiveCamera)

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

  PerspectiveCamera(fov,aspect,near,far)複製程式碼

Threejs之二:相機詳解

根據上圖來理解透視投影相機的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);複製程式碼

    得到下圖的結果:

    Threejs之二:相機詳解

    通過透視投影相機我們可以看到正方體的所有線條,有遠近大小的效果,你可以通過改變fov視角的度數來觀察效果(視角越大物體越小).

正投影相機(THREE.OrthographicCamera)

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

Threejs之二:相機詳解

正投影相機的六個引數,分別代表相機拍攝到的空間的六個面的位置,這六個平面圍成一個長方體,這個長方體也叫視景體(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);複製程式碼

得到如下結果:

Threejs之二:相機詳解

由於前面的邊覆蓋了後面的邊,導致我們看到的是一個正方形.
你可以通過改變相機每個平面的引數來理解每個引數的實際作用.
當然,你也可以通過監聽鍵盤事件來改變相機的位置實現一個動態的場景:

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的各種用法持續更新的.

相關文章