---

01 介绍

这个课程的主讲人是 Bruno Simon， 这是他的作品集

他还做了一些有趣的项目：

• https://my-room-in-3d.vercel.app
  

• https://organic-sphere.vercel.app

• https://experiment-holographic-terrain.vercel.app

• https://experiment-woodkid-volcano-robot.vercel.app

• https://infinite-world.vercel.app/

• https://awwwards-2022-workshop.vercel.app

---

02 什么是 WebGL，为什么用 ThreeJS

什么是 WebGL？

WebGL 是一种 JavaScript API，可以以惊人的速度在画布上渲染三角形。它与大多数现代浏览器兼容，并且速度很快，因为它使用了访问者的图形处理单元 (GPU)。

WebGL 不仅可以绘制三角形，还可以用于创建 2D 体验，但出于课程的目的，我们将重点介绍使用三角形的 3D 体验。

GPU 可以进行数千次并行计算。想象一下，您要渲染一个 3D 模型，而这个模型由 1000 个三角形组成——仔细想想，这个数字并不算多。每个三角形包含 3 个点。当我们想要渲染模型时，GPU 必须计算这 3000 个点的位置。由于 GPU 可以进行并行计算，因此它将一次性处理所有三角形点。

一旦模型的点被正确放置，GPU 就需要绘制这些三角形的每个可见像素。同样，GPU 将一次性处理成千上万个像素的计算。

放置点和绘制像素的指令写在我们所谓的着色器中。让我告诉你，着色器很难掌握。我们还需要为这些着色器提供数据。例如：如何根据模型变换和相机的属性放置点。这些被称为矩阵。我们还需要提供数据来帮助着色像素。如果有光并且三角形面向该光，它应该比三角形没有面向光时更亮。

这就是原生 WebGL 如此困难的原因。在画布上绘制一个三角形至少需要 100 行代码。如果您想添加透视、灯光、模型并在这种情况下为所有内容制作动画，那就祝您好运了。

但原生 WebGL 的优势在于其存在于较低级别，非常接近 GPU。这可以实现出色的优化和更多控制。

Three.js 来帮忙

Three.js 是一个遵循 MIT 许可的 JavaScript 库，可在 WebGL 上运行。该库的目标是大大简化处理我们刚才提到的所有内容的过程。您只需几行代码即可获得动画 3D 场景，而且您无需提供着色器和矩阵。

由于 Three.js 位于 WebGL 之上，我们仍然可以以某些方式与其交互。在某个时候，我们将开始编写着色器并创建矩阵。

Ricardo Cabello，又名 Mr.doob（网站、Twitter），是 Three.js 的开发者。他仍在继续开发，但现在他得到了一个大型社区的帮助。您可以在此处查看贡献者列表：https 😕/github.com/mrdoob/three.js/graphs/contributors

目前，该库每月都会更新一次，您可以在此处的发布页面中查看更改的内容：https: //github.com/mrdoob/three.js/releases

您可以在网站主页上发现许多使用 Three.js 的优秀项目：https://threejs.org/

还有一些我们会经常使用的维护良好的文档：https 😕/threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

您可以在此处找到数百个带有公共代码的示例： https: //threejs.org/examples/#webgl_tonemapping

如果您想关注更新并发现出色的项目，我建议您关注 Mr.doob 和 Three.js 推特账户：

https://twitter.com/mrdoob

https://twitter.com/threejs