1.照相机

定义了三维空间到二维屏幕的投影方式

2.正交投影照相机（Orthographic Camera）

正交投影相机

3.视体（viewing frustum）

又称视景体、视锥，是三维世界中在屏幕上可见的区域，即虚拟摄像机的视野。

THREE.OrthographicCamera(left, right, top, bottom, near, far)

为了保持照相机的横竖比例，需要保证 (right - left) 与 (top - bottom) 的比例与 Canvas宽度与高度的比例一致。
near 与 far 都是指到照相机位置在深度平面的位置，而照相机不应该拍摄到其后方的物
体，因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机
忽略，一般 near 的值设置得较小， far 的值设置得较大，具体值视场景中物体的位置等
决定。

4.观察方向

照相机沿 z 轴负方向观察

.lookAt ( vector )

vector — 观察点

该函数设定相机在全局空间中的位置。

camera.lookAt(new THREE.Vector3(0, 0, 0));  //看着原点方向

5.正交照相机总结

<script type="text/javascript">
        function init(){
            //渲染器
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            //场景
            var scene = new THREE.Scene();
            //照相机
            var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
            camera.position.set(4, -3, 5);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            //创建边长为1的红色正方体，wireframe（线框）材质，以便看到正方体后方的边
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
                    new THREE.MeshBasicMaterial({
                        color:0xff0000,
                        wireframe:true
                    })
            );
            scene.add(cube);
            //渲染
            renderer.render(scene,camera);
        }
    </script>

6.透视投影照相机（Perspective Camera）

透视投影照相机

THREE.PerspectiveCamera(fov, aspect, near, far)

fov — 相机视锥体竖直方向上的张角（是角度制而非弧度制）
aspect — 相机视锥体宽高比width / height，通常设为Canvas 的横纵比例
near — 相机视锥体近裁剪面
far — 相机视锥体远裁剪面

near 和 far 分别是照相机到视景体最近、最远的距离，均为正值，且 far 应大于near。

fov增大时视景体变大，物体相对于整个视景体的大小变小，看起来就显得变小了。

7.透视照相机总结

<script type="text/javascript">
      function init(){
          //渲染器
          var renderer = new THREE.WebGLRenderer({
              canvas:document.getElementById('mainCanvas')
          });
          renderer.setClearColor(0x000000);
          //场景
          var scene = new THREE.Scene();
          //照相机
          var camera = new THREE.PerspectiveCamera(60, 400 / 300, 1, 10);
          camera.position.set(0, 0, 5);
          scene.add(camera);
          //创建边长为1的红色正方体，wireframe（线框）材质，以便看到正方体后方的边
          var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
                  new THREE.MeshBasicMaterial({
                      color:0xff0000,
                      wireframe:true
                  })
          );
          scene.add(cube);
          //渲染
          renderer.render(scene,camera);
      }
  </script>