three.js之camera

今天的主题是three.js中用于观察三维空间的摄像机。

1.认识camera

图形学中的摄像机定义了三维空间到二维屏幕的投影方式。

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

下面我们看图认识摄像机：

正交

透视

正交投影就像数学课上画的，远近高低比例都相同。；而透视投影有一个基本点，就是远处的物体比近处的物体小，远大近小。

对于制图、建模软件通常使用正交投影；而对于其他大多数应用，通常使用透视投影。

2.正交投影摄像机

正交投影摄像机的构造函数：

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

六个参数分别代表正交投影照相机拍摄到的六个面的位置。

其中，near表示近平面与相机中心点的垂直距离；far表示远平面与相机中心点的垂直距离。

有了这些参数和相机中心点，我们这里将相机的中心点又定义为相机的位置。通过这些参数，我们就能够在三维空间中唯一的确定上图的一个长方体。这个长方体也叫做视景体。

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

栗子：

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

scene.add( camera );

3.透视投影摄像机

透视投影摄影机的构造函数：

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

-fov 可视角度

- aspect 实际窗口的纵横比

- near 近处的裁面的距离

- far 远处的裁面的距离

只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。

透视图中，灰色的部分是视景体，是可能被渲染的物体所在的区域。

fov是视景体竖直方向上的张角（是角度制而非弧度制），如侧视图所示。

aspect等于width / height，是照相机水平方向和竖直方向长度的比值，通常设为Canvas的横纵比例。

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

栗子：

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

scene.add( camera );