《WebGL入门指南》——第2章，第2.1节Three.js——一个JavaScript 3D引擎

本节书摘来自异步社区《webgl入门指南》一书中的第2章，第2.1节three.js——一个javascript 3d引擎，作者 【美】tony parisi，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.1　three.js——一个javascript 3d引擎

webgl入门指南

在本书中我们使用的webgl框架叫做three.js，它是由居住在西班牙巴塞罗那的程序员ricardo cabello miguel开发的，此人更出名的网名叫做mr.doob。three.js以简单、直观的方式封装了3d图形编程中常用的对象。three.js在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，three.js的功能也非常强大。最后，three.js还是完全开源的，你可以在github上找到它的源代码，并且有很多人贡献代码，帮助mr.doob一起维护这个框架。

我选择three.js来编写示例代码有两个原因。第一，我目前在我自己的项目中也在使用它，并且我很喜欢它。第二，在众多引擎中它更受欢迎，已经成为其中的佼佼者。不过没有关系，你也可以选择其他你喜欢的框架，也许其他框架会更适合你的项目，更满足你项目的需求。一个引擎肯定不能适用于所有情况。我提及的其他引擎也都非常不错。如果可以的话，你甚至也可以编写自己的3d引擎。但在这之前，我们还是来看看既存的webgl框架吧！

事实上，像three.js这种工具集的出现和存在很大程度上是因为在最近几年中浏览器中的javascript虚拟机的迅猛发展。在一些年之前，虚拟机的性能还不足以支持这种库的存在，甚至连webgl都不可能投入实际应用。得益于虚拟机的技术进步，才让webgl和像three.js这种工具集走进数以百万计的web开发者的视线。

随着本书的逐步深入，你会了解到three.js的更多细节。现在，我们先简要地列出three.js的功能概述。

three.js掩盖了3d渲染的细节

three.js将webgl原生api的细节抽象化，将3d场景拆解为网格、材质和光源（即它内置了图形编程常用的一些对象种类）。

three.js是面向对象的

开发者可以使用上层的javascript对象，而不是仅仅调用javascript函数。

three.js功能非常丰富

除了封装了webgl原始api之外，three.js还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、高分辨率模型和一些特殊的视觉效果制作。

three.js速度很快

three.js采用了3d图形最佳实践来保证在不失可用性的前提下，保持极高的性能。

three.js支持交互

webgl本身并不提供拾取（picking）功能（即是否知道鼠标正处于某个物体上）。而three.js则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。

three.js包含数学库

three.js拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。

three.js内置文件格式支持

你可以使用流行的3d建模软件导出文本格式的文件，然后使用three.js加载；也可以使用three.js自己的json格式或二进制格式。

three.js扩展性很强

为three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到three.js即可。

three.js同时支持html5 2dcanvas

尽管webgl日益流行，但是仍然有一些环境尚未支持。three.js可以同时在2d画布中渲染大部分的3d内容，尤其是在那些无法成功获取3d上下文的地方，可以让你的代码平滑的回滚到其他解决方案。

另外很重要的一点就是了解有哪些事情是three.js无法做到的。three.js不是一个游戏引擎，也不是一个虚拟现实平台。它缺少了一些在这些系统中常用的特性，比如公告板（billboard）、头像（avatar）和物理引擎。另外，如果你打算开发一个多人在线游戏，那么很可惜，three.js并没有内置任何的网络支持。如果你确实需要这些功能模块，那你必须在three.js上层再进行二次封装。尽管如此，three.js的简洁和强大仍然使其成为开始学习webgl的最佳选择之一。

好了，如果没有其他问题，那么就让我们继续，并开始写一些代码吧！