WebGL Three.js Canvas 对比

一、OpenGL,WebGL

OpenGL大概许多人都有所耳闻，它是最常用的跨平台图形库。

WebGL是基于OpenGL设计的面向web的图形标准，提供了一系列JavaScript API，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。

而Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。

简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮我们封装得更好用一些。

logo-compassion.jpg

WebGL与Three.js对比

既然有了WebGL，我们为什么还需要Three.js？

这是因为WebGL门槛相对较高，需要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发完全是两个不同的方向，知识的重叠很少。相关性只是他们都在web平台上，都是用javascript而已。一个前端程序员或许还熟悉解析几何，但是还熟悉线性代数的应该寥寥无几了（比如求个逆转置矩阵试试？），更何况使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。

因此，前端工程师想要短时间上手WebGL还是挺有难度的。

于是，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失WebGL的灵活性。因此，从Three.js入手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。以下是 Three.js 制作 3D 的五要素：

1. 渲染器（render）
我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。

2. 场景（scene）
相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。

3. 照相机（camera）
相当于眼睛，我们想要看到物体，就需要眼睛去看。

4. 光源（light）
物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。

5. 物体（object）
我们想要表现的内容，会有形状和材质属性。