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