【Three.js】Three.js入门教程——清晰明了 好上手！

一、文档地址：

中文网址：3. 开发和学习环境，引入threejs | Three.js中文网

二、Three.js 和 WebGL 的关系：

Three.js是WebGL的框架。封装和简化了WebGL的方法。three.js在它的基础上进行了进一步的封装和简化开发开发过程,个人认为类似于jQuery对原生js的关系。

 WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。相当于 WebGL 给我们提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。

Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装，简化我们创建三维动画场景的过程。

三、Three.js 的优点：

1、掩盖了 3D 渲染的细节：

Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源（即它内置了图形编程常用的一些对象种类）；
2、面向对象：

开发者可以使用上层的 JavaScript 对象，而不是仅仅调用 JavaScript 函数；
3、功能非常丰富：

Three.js 除封装了 WebGL 原始 API 之外，Three.js 还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作；
4、速度很快：

Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下，保持极高的性能；
5、支持交互：

WebGL 本身并不提供拾取（Picking）功能（即是否知道鼠标正处于某个物体上）。而 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 的优势很大，但是它也有它的不足之处：
1、官网文档粗糙，对于新手不友好；
2、国内的相关资源匮乏，而且资料大多以英文格式存在；
3、不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发；

五、建立一个基础3D图形

浏览器打开，即可看到一个旋转的立方体；

未完待续。。。