《Three.js 入门指南》2- 照相机

2.1 什么是照相机

我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。

而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。

简单的来说，就是在2维的屏幕上，实现3维的画面效果。

2.2正交投影 vs 透视投影

什么是正交投影和透视投影？

如图（a），透视投影更贴近我们实际生活中，人眼视觉感受，更加合理，真实。其特点是“近大远小”

如图（b），正交投影，即我们数学概念上的立体图形，我们不考虑显示生活中，该物体给我们人眼的实际视觉感受，仅客观的展现其形状特性。其特点是“在三维空间内平行的线，投影到二维空间中也一定是平行的”。

同一个立体物体，通过透视投影和正交投影，给我们的实际视觉感受并不相同。

怎么判断我需要正交投影还是透视投影？

一般说来，对于制图、建模软件通常使用正交投影，这样不会因为投影而改变物体比例；而对于其他大多数应用，通常使用透视投影，因为这更接近人眼的观察效果。

2.3正交投影相机和透视投影相机的参数说明

正交投影相机

参数介绍

正交投影照相机（Orthographic Camera）设置起来较为直观，它的构造函数是：

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

这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置，这六个面围成一个长方体，我们称其为视景体（Frustum）。只有在视景体内部（下图中的灰色部分）的物体才可能显示在屏幕上，而视景体外的物体会在显示之前被裁减掉。

为了保持照相机的横竖比例，需要保证(right - left)与(top - bottom)的比例与Canvas宽度与高度的比例一致。

near与far都是指到照相机位置在深度平面的位置，而照相机不应该拍摄到其后方的物体，因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略，一般near的值设置得较小，far的值设置得较大，具体值视场景中物体的位置等决定。

透视投影相机

参数介绍

透视投影照相机（Perspective Camera）的构造函数是：

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

让我们通过一张透视照相机投影的图来了解这些参数。

透视图中，灰色的部分是视景体，是可能被渲染的物体所在的区域。fov是视景体竖直方向上的张角（是角度制而非弧度制），如侧视图所示。

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

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

特别需要注意的一点：

在修改视角的时候，我们一般需要修改这两个参数：

一个是相机的位置：camera.position.set(4, 3, 5);

另一个是相机的镜头瞄准点：camera.lookAt(new THREE.Vector3(0, 0, 0))

 

而需要注意的地方就是，不论设置了什么，这些设置都应该放在渲染之前，也就是说，renderer.render(scene, camera);该代码需要放在最后，修改视角（别的也是一样）才能够生效。