01 初识Three.js

什么是WebGL？

WebGL（Web图形库）是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式的3D或者2D图形，并且不用使用任何的插件。WebGL通过引入一个与OpenGL ES2.0紧密相符合的API，可以在HTML5元素中使用。简而言之，WebGL可以提供一系列的图形接口，通过js去使用GPU来进行浏览器图形渲染的工具。

什么是Three.js？

Three.js是一款WebGL框架，由于其易用性被广泛应用。而Three.js在WebGL的API接口基础上又进行了一层封装。Three.js以简单、直观的方式封装了3D图形编程中常用的对象。Three.js在开发中使用了很多图形引擎的高级技巧，极大的提高了性能，而由于其内置了很多常用对象和极易上手的工具，Three.js的功能也很强大，关键在于Three.js是完全开源的。

WebGL和Three.js的关系

WebGL原生的API是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门比较困难，Three.js将入门的门槛降低了整整一大截，对WebGL进行封装，简化了我们创建三维动画场景的过程。只需要有一定的JavaScript基础，有一定的前端经验即可。用一句话概括二者的关系：WebGL与Three.js的关系相当于JavaScript与jQuery之间的关系。

Three.js的功能概述

由于Three.js的易用性和扩展性，使其能够满足大部分的开发需求，Three.js的具体功能如下：

1. Three.js掩盖了3D渲染的细节。Three.js将WebGL原生的API的细节抽象化，将3D场景拆解为网格、材质和光源（即Three.js内置了图形编程常用的一些对象种类）。
2. 面向对象。开发者可以使用上层的JavaScript对象，而不仅仅调用JavaScript函数。
3. 功能丰富。Three.js除了封装了WebGL原始的API之外，Three.js还包含了许多实用的内置对象，可以方便的应用于游戏开发、动画制作、幻灯片制作、高分辨率模型和一些特殊的视觉效果制作。
4. 速度快。Three.js采用了3D图形最佳实践来保证在不失可用性的前提下保持极高的性能。
5. 支持交互。WebGL本身不提供拾取功能（即是否知道鼠标正处于某个物体上），而Three.js则固化了拾取支持，这就便于为应用添加交互功能。
6. 包含数学库。Three.js拥有一个强大易用的数学库，可以在其中进行矩阵、投影和矢量计算。
7. 内置文件格式支持。可以使用当前的3D建模软件导出文本格式的文件，然后使用Three.js加载，也可以使用Three.js自带的json格式或者二进制格式。
8. 扩展性强。为Three.js添加新的特性或进行自定义优化是很容易的事。如果需要某个特殊的数据结构，那么只需要封装到Three.js即可。
9. 支持HTML5 canvas。Three.js不仅支持WebGL，而且还支持使用canvas2D、CSS3D和SVG进行渲染。在未兼容的WebGL环境中可以回退到其他的解决方案。

Three.js的缺点

虽然Three.js的优势很大，但是其也有不足的地方：

1. 官网文档非常粗糙，对于入门的新手极度不好。
2. 国内相关资源的匮乏。
3. Three.js多有的资料都是以英文格式存在，对于英文不好的开发者来说又提高了门槛。
4. Three.js不是游戏引擎，一些游戏相关的功能并没有封装在里面，如果需要相关的功能则需要进行二次开发。

Three.js的引用

如果需要更新代码，可以去网址http://www.bootcdn.cn/three.js/查找最新版本地址引入即可。