和我一起学 Three.js【初级篇】：3. 掌握摄影机

本篇文章共 4473 字，最近更新于 2023 年 04 月 19 日。

0. 系列文章合集

本系列第 6，7，8 章节支持在我的个人公众号「前端乱步」内付费观看，将在全平台文章「点赞数」+「评论数」 >= 500（第 6 章）, 1000（第 7，8 章） 时分别解锁发布。

1. 《和我一起学 Three.js【初级篇】：0. 总论》
2. 《和我一起学 Three.js【初级篇】：1. 搭建 3D 场景》
3. 《和我一起学 Three.js【初级篇】：2. 掌握几何体》
4. 您当前在这里《和我一起学 Three.js【初级篇】：3. 掌握摄影机》
5. 《和我一起学 Three.js【初级篇】：4. 掌握纹理》
6. 《和我一起学 Three.js【初级篇】：5. 掌握材质》
7. 《和我一起学 Three.js【初级篇】：6. 掌握光照》
8. 《和我一起学 Three.js【初级篇】：7. 掌握阴影》
9. 《和我一起学 Three.js【初级篇】：8. 融会贯通》

1. 什么是摄影机？

在 Three.js 中，摄影机（Camera）用来定义场景中的「视角」以及「可见范围」（为了提升渲染性能，超出可见范围的物体将不会被渲染，这被称为「视锥体剔除（frustum culling）」技术）。除此之外，摄影机实际上还控制着场景中物体的「位置」和「大小」，通过移动摄影机，GPU 会渲染出符合直觉的物体透视效果，从而让我们有优秀的 3D 场景体验。

因此，掌握 Three.js 提供的各种摄影机以及控制摄影机的各种方法，能够使我们的 3D 场景和用户进行互动并极大的丰富场景的呈现方式。

掌握本章节的概念和内容非常重要，请您务必保持耐心，动手实践。

2. 摄影机的种类

在 Three.js 中，所有摄影机都封装为特定的子类，它们统一继承自一个抽象类：[Camera](https://threejs.org/docs/?q=camera#api/en/cameras/Camera)。Three.js 提供的摄影机有：

• 数组摄影机（[ArrayCamera](https://threejs.org/docs/?q=camera#api/en/cameras/ArrayCamera)）：主要用于需要渲染多个视角的场景，例如 VR，AR，多屏幕游戏等。它通过将多个摄影机实例放入数组并传入 ArrayCamera 中，GPU 会渲染各个摄影机视角下的场景，并将它们合并在画布中，例如这个示例展示了不同角度的摄影机观察同一个物体的效果：

• 立体摄影机（[StereoCamera](https://threejs.org/docs/?q=StereoCamera#api/en/cameras/StereoCamera)）：可以同时生成两个相机对象，一个渲染左眼图像，一个用于渲染右眼图像。这就很适合在 VR，AR，3D 视频等应用中产生更加真实的 3D 效果（由 StereoCamera 生成的 VR 效果可以通过 Oculus Rift，HTC Vive 等 VR 头显设备观看）。

• 立方体摄影机（[CubeCamera](https://threejs.org/docs/?q=CubeCamera#api/en/cameras/CubeCamera)）：用于生成「环境贴图（Environment Map）」，它会生成一个立方体场景，捕捉场景内的环境信息，分别在 6 个面各渲染一次，然后将渲染结果用于物体的反射贴图，折射贴图，从而增强场景的真实感和细节效果。

「环境贴图」是一种常用于增强场景真实感的技术，它通过将场景中周围环境信息捕捉下来，并将其应用于物体表面的材质中，从而使物体看起来更加真实和具有反射性。具体来说，环境贴图是一张包含了场景中周围环境的图像，通常为立方体贴图。它可以捕捉到场景中的反射、折射、漫反射、全局光照等信息，使得物体的表面看起来更加真实，同时也可以增强场景的光照效果。

• 正交摄影机（[OrthographicCamera](https://threejs.org/docs/?q=Ortho#api/en/cameras/OrthographicCamera)）：将会渲染一个没有透视效果的场景，无论物体和摄影机的距离如何，物体的大小都不会放生变化。可以通过该摄影机创建 RTS 类游戏，例如帝国时代。

• 透视摄影机（[PerspectiveCamera](https://threejs.org/docs/?q=Camera#api/en/cameras/PerspectiveCamera)）：这是 Three.js 中最常用的摄影机，它可以模拟人眼观察物体时近大远小的透视效果。

请注意透视摄影机与正交摄影机在渲染立方体时的不同，在正交摄影机中，所有立方体的尺寸是相似的。

3. 创建摄影机

下面将进入代码实践环节，请务必确保您已阅读之前的文章，和我拥有相同的开发环境！

本节我们不会涵盖「立方体摄影机」和「立体摄影机」，因为前者涉及我们下一章的内容，我会放在一起介绍。而后者由于需要额外设备，对于大多数人难以观察结果，因此略去不提。

3.1 透视摄像机

让我们首先介绍最常用的透视摄像机，创建一个透视摄像机非常简单，只需要实例化 PerspectiveCamera 类，并传入对应的参数：

const camera = new THREE.PerspectiveCamera(<