什么是WebGL和为什么用Three.js | 《Three.js零基础直通02》

前言

Three.js是一个在浏览器里创造3D内容的 JavaScript库，它让我们能够更加轻松的为网页创建3D体验。

使用Three.js开发的案例

这里我为大家收集了一些使用Three.js开发的精彩案例

• https://bruno-simon.com

https://microwaver59.com/

https://therace.montblanclegend.com/

https://ezshine.jnsii.com/cases/smart3d/index.html‍

• https://david-hckh.com/

这样的网页实在是太酷炫了，对不对？是不是想立刻学习如何制作这样的网页？

在学习Three.js之前，让我们先了解下WebGL到底是什么。

什么是WebGL?

WebGL是一个JavaScript API，它可以让我们非常高性能的在画布中绘制三角形。没错，三角形是组成数字3D世界的基础。大多数的现代浏览器都支持这个API，并且由于它可以使用GPU来进行计算，所以它速度很快。

当然，WebGL实质就是绘图库，它并不区分你使用来绘制3D还是2D图形，在本课程里，我们当然是专注于构建3D的。

GPU可以用并行的方式进行计算。3D模型往往由成千上万个三角形构成，每个三角形都有3个点。当我们在计算机中渲染我们的模型时，GPU实质上是在计算所有的点的位置。但由于GPU可以进行并行计算，所以虽然这些点的数量看上去很庞大，但依然可以高效率的完成计算。除此之外，GPU还需要绘制根据这些点组成的面的像素。

计算所有点的位置并将像素绘制在画布上，这一切都是着色器Shader完成的。着色器的相关知识很难掌握。我们还需要知道如何向这些着色器提供数据。比如根据相机的视角计算变换模型的呈现。再比如光照如何影响每一个三角形面的颜色，显然被光照到的三角形面要比没有光照三角形面要亮。

直接使用WebGL的API是非常困难的，在画布上绘制一个三角形就至少需要100行代码。如果你想添加透视图，灯光，模型并在这种情况下为所有内容设置动画，只会难上加难。

还好有Three.js

https://github.com/mrdoob/three.js

Three.js是使用MIT开源协议的JavaScript库，底层使用WebGL API来工作。这个库由Ricardo Cabello（Mr.doob）创造，现在有一个庞大的社区组织来维护更新，几乎每个月都会更新，在使用的时候，我们应该注意教程和Three.js库当前的发行版本号。

这个库最大的目标是简化处理我们使用WebGL的难点，我们只需几行代码就可以绘制带有动画的3D场景，而不必去了解着色器、矩阵算法等晦涩的知识点。

不过，在这个课程的后期，我们也会学习一些着色器的API。虽然我也不太擅长这部分，但足以带大家入门。

有没有其它类似的库？

当然有，比如微软的Babylon.js，Mozilla的A-Frame，还有Snapchat旗下的PlayCanvas等等，这些库都是为了让我们更加轻松的使用WebGL来创建绚丽的Web3D体验。这些库各有优点，适用的场景也略有不同。未来我们甚至还可以使用已经逐渐进入浏览器标准的WebGPU API。

但是Three.js目前仍是最受欢迎的WebGL库，相关的资料和社区，以及案例都非常丰富，从这里入手学习是最佳选择。