Threejs官例解析，Camera

相机是三维世界里一个重要的存在，很多操作直接影响渲染的好坏。

三维里的相机分为两种，一种是透视相机，一种是正交相机。如下:

图片来自《OpenGL编程指南第七版》
透视相机是模拟人眼的一种相机，照出来的物体近大远小。

Three里面初始化一个透视相机需要这些参数：

function PerspectiveCamera( fov, aspect, near, far ) 

fov为视锥体垂直视野角度，默认值是50 。

aspect为宽高比。

near，far分别为观察点（相机的位置）离近裁剪面和远裁剪面的距离。 此两值应为正。

正交相机的视景体（相机可见范围）就是一个盒子。

物体离相机多远看起来都是那么大。（有那么一种在渲染正视图，侧视图，俯视图的感觉。）

参数也很简单粗暴。

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

就是表面的意思。

Threejs里面有一个例子，是说相机的，正好，撸过来看看，也了解一下API。

（在例子列表里叫Camera，文件是webgl_camera.html）

对，就是下面这个，一面展示的是相机的渲染结果，一面是相机目前的状态。

源程序o/p键可以切换相机的状态。

瞄一眼所有变量，应该问题不大。

cameraRig，是一个group，里面放了实例的正交和透视相机，还有一个球。这家伙的主要作用就是保证相机一直瞅着接下来要生成的那几个球。

frustumSize，主要是控制正交相机那个盒子的大小。

先实例了一个相机，这个相机用来观察我们生成的正交和透视。

我们一般生成的相机，宽高比都像是如下这样：

这个被缩了0.5，是因为我们最后的屏幕是两个相机的结果拼接的，所以一个相机的宽高比只有正常相机的一半。

瞄一眼其他的相机生成，中规中矩，Helper的生成还是很方便的。

上面这段有一点值得念叨念叨，参照下图。

1. 相机默认的位置是在原点，并且朝向Z负，
2. cameraRig的目的就是让cameraRig一直lookAt我们随后要加入场景的几个球，并带动相机也看那几个球 lookAt是调整
3. cameraRig 的Z正方向使其指向那几个球 调整cameraOrtho和cameraPerspective的旋转，使其Z正和
4. cameraRig 的Z正一致，这样才能照到那几个物体。
   

突然觉得这个例子蛮有趣的，这是在模拟星空的感觉么，由于这个两个球没有任何过多的修饰，我一开始并没有看出来。看到他们的运动有点地球和月球的意思，还有生成了很多的随机点来模拟“星星”，我想作者是想模拟一下星空？

看一下球的生成和球的运动

白球（mesh）绕着scene上下左右的绕圈圈，绿球（mesh2）绕着白球绕圈，蓝球相对于相机静止。

因为这个代码需要显示两个相机渲染的结果，所以初始化完渲染器之后，需要关闭 渲染器 的自动清空的功能。

renderer.autoClear = false;

每个需要渲染的相机分别渲染，并且设置需要渲染在屏幕的哪个位置。宽高是多少，主要用到setViewport函数。