目的

了解两种相机类型：透视相机和正投影相机
学习设置相机的不同参数，使场景显示不同的角度

Threejs的相机

1、相机的种类

在 Threejs 中相机表示为 THREE.Camera，它是相机的抽象类，其子类有两种相机，分别是正投影相机：THREE.OrthographicCamera 和透视投影相机：THREE.PerspectiveCamera。

正投影相机的效果就是没有焦点的投影，近远高低比例都相同（我的理解）；透视投影相机就是有焦点，会有近远景的效果的投影。

例如：工程建筑领域、初中学习的正视图+俯视图+侧视图。

2、正投影相机

在 Threejs 中，正投影相机的构造函数如下：

OrthographicCamera( left, right, top, bottom, near, far);

// 各个平面就是一个立方体的各个面
// left   : 左平面距离相机中心的垂直距离
// right  : 右平面距离相机中心的垂直距离
// top    : 顶平面距离相机中心的垂直距离
// bottom : 底平面距离相机中心的垂直距离
// near   : 近平面距离相机中心的垂直距离
// far    : 远平面距离相机中心的垂直距离

OrthographicCamera( left, right, top, bottom, near, far);

// 各个平面就是一个立方体的各个面

// left : 左平面距离相机中心的垂直距离

// right : 右平面距离相机中心的垂直距离

// top : 顶平面距离相机中心的垂直距离

// bottom : 底平面距离相机中心的垂直距离

// near : 近平面距离相机中心的垂直距离

// far : 远平面距离相机中心的垂直距离

有了这些参数和相机中心点（就是相机），通过参数，就能够在三维空间中唯一的确定一个立方体。这个立方体叫做景体。

投影变换的目的就是定义一个视景体，使得视景体外多余的部分裁剪掉，最终图像只是视景体内的有关部分。

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var camera = new THREE.OrthographicCamera( WIDTH / 2, WIDTH / 2, HEIGHT / 2, HEIGHT / 2, 1, 1000 );
scene.add( camera );

var WIDTH = window.innerWidth;

var HEIGHT = window.innerHeight;

var camera = new THREE.OrthographicCamera( WIDTH / 2, WIDTH / 2, HEIGHT / 2, HEIGHT / 2, 1, 1000 );

scene.add( camera );

这个例子是将浏览器的宽度和高度作为了视景体的高度和宽度，相机正好的窗口的中心点上，距离近平面距离为1，远平面距离为1000。此时最终的图像看到的就是这个虚拟的长方体立体空间了。

3、透视投影相机

透视投影才符合我们视觉的投影，正因为有远近高低，物体才会显得活灵活现。因此，透视相机才这么有潜力，在各种应用中运用非常广泛。

在 Threejs 中，透视投影相机的构造函数如下：

PerspectiveCamera( fov, aspect, near, far );

// fov    : 视角   若为 0 则相当于什么都看不到 角度越大视界视野越广阔
                  看到的东西也越多但也越小 但也不能超过 180，不然程序
                  就认为你要看的场景设为无穷大了
// aspect : 纵横比 实际窗口的纵横比 即宽度除以高度
// near   : 近平面 表示近处裁面的距离 也可以认为是眼睛距离近处的距离 不能为负值
// far    : 远平面 表示远处裁面的距离 基本理解同near

PerspectiveCamera( fov, aspect, near, far );

// fov : 视角若为 0 则相当于什么都看不到角度越大视界视野越广阔

看到的东西也越多但也越小但也不能超过 180，不然程序

就认为你要看的场景设为无穷大了

// aspect : 纵横比实际窗口的纵横比即宽度除以高度

// near : 近平面表示近处裁面的距离也可以认为是眼睛距离近处的距离不能为负值

// far : 远平面表示远处裁面的距离基本理解同near

举个例子：

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 45, WIDTH / HEIGHT, 1, 1000 );
scene.add( camera );

var WIDTH = window.innerWidth;

var HEIGHT = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 45, WIDTH / HEIGHT, 1, 1000 );

scene.add( camera );