「和我一起学 XXX」是我 2023 年的一个新企划，目的是向读者（也包括未来的自己）介绍我
正在学习
的某项新技术。文章会通过长期反复迭代的方式保持其内容的新鲜度。文章有较大内容更新时，会在文章开头进行更新时间说明（由于时间精力有限，更新的内容只能保障少数几个平台的同步，请见谅）。

1. 什么是 Three.js

Three.js 是一个
基于 WebGL
的
3D JavaScript 开源库
（遵循 MIT 协议），它使 JavaScript 开发者能够
更方便地
在 Web 应用中创建
3D 场景
。

请注意该定义的如下部分：

• 基于 WebGL
  ：WebGL 是一种 3D 绘图协议，对于开发者而言，它是一组更底层的绘图 API，它负责绘制点，线与三角形，使用 WebGL 绘制复杂的 3D 场景，需要非常多的代码；
• 3D JavaScript 开源库
  ：Three.js 基于非常宽松的 MIT 协议，这意味着您可以自由使用，修改 Three.js 代码创建商业应用；
• 更方便地
  ：就像 jQuery 基于 JavaScript 提供了更友好地 API 使开发者能够轻松地操作 DOM 一样，Three.js 也封装出更友好地 API 供开发者绘制 3D 场景，相较于使用 WebGL，使用 Three.js 绘制 3D 场景需要的代码量要少的多得多。
• 3D 场景
  ：它包含：
  
  • 3D 游戏；
  • 建筑设计和数据可视化看板；
  • AR，VR；
  • 虚拟展厅，虚拟商品展示；
  • 交互式展览，培训等；

您可以在 Three.js
官网
发现丰富的案例，它们从不同方面展示了 Three.js 的魅力和强大！

2. （我）为什么要学习 Three.js？

在了解 Three.js 是什么后，若选择继续学习，想必您有自己的理由。对于我而言，学习 Three.js 的主要动机是「
好玩
」（Just for fun!）。

我觉得能够在显示器上渲染 3D 场景是件很酷的事情，特别是它还可以通过 VR 头显设备让人们身临其境体验到一个由我创造的虚拟世界！

无论您学习的动机是否与我相同，都欢迎您和我一起持续探索 Web 3D 世界。我有信心带您一起踏入 3D 世界的大门！

3. 需要学习哪些内容？

在 Three.js 的
官方文档
中，您可以看到一个简单的 Three.js 应用包含了哪些模块：

您可以看到，图中包含了「
渲染器
(Renderer)」，「
场景
(Scene)」，「
摄影机
(Camera)」，「
网状物
(Mesh)」，「
3D 对象
(Object3D)」，「
灯光
(Light)」，「
几何体
(Geometry)」，「
材质
(Material)」和「
纹理
(Texture)」等元素，如果您从未接触过 Web 3D 世界，您可能有点摸不着头脑。

但是别担心，通过阅读本系列文章，您将能够掌握绝对大多数内容，并了解它们之间的关系。在往后的篇幅中，我将一一介绍这些名词并介绍它们对于构建 Web 3D 场景的意义所在，以及您应该如何正确地使用它们。通过完全掌握这些概念，您应该能够自己实现任意简单的 3D 场景。

我发现很多文章专注于介绍某种 3D 场景具体如何搭建，在本系列文章中，我不会这么做，我倾向于采用一种「自顶向下」的方法，让您理解到 Web 3D 世界的每个构成要素，然后您便能通过自由组合这些要素，搭建任意您感兴趣的 3D 场景。

因此接下来，本系列文章将会分为如下几个部分向您介绍 Three.js 技术的基本元素：

⚠️ 文章具体内容可能会根据实际情况有所增减。

3.1 搭建 Web 3D 场景

本章将介绍搭建 Web 3D 场景的必备要素（包含场景，物体与动画）和基本原理，通过本章的学习，您应该有能力开发出一个基本的 3D 场景，它类似于 Web 3D 世界的
Hello World
，标志您正式踏入 Web 3D 世界。

3.2 掌握几何体

本章将介绍 Three.js 提供的多个几何体元素以及它们的特性。它们将是未来您构建的各类 3D 场景中的主角。

3.3 掌握摄影机

摄影机的种类和位置不仅决定了我们观察 3D 世界的方式，也决定了物体的光影和色彩该如何被 GPU 渲染，本章我们将了解 Three.js 提供的摄影机种类以及如何操作它们。

3.4 掌握纹理

本章将介绍「纹理」这个概念，您可以将他理解为「贴图」，通过恰当地使用纹理，您可以让您的几何体成为具象的现实物体。

3.5 掌握材质

本章将介绍「材质」，即讨论物体的每个可见像素应该被如何着色的问题，通过掌握物体材质的设置方法，您的 3D 物体将会配合光影产生更加逼真的效果。