和我一起学 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.PerspectiveC