七、Three.js 框架
有许多 WebGL 框架可用于抽象出我们在本书前六章中提到的低级应用编程接口(API)调用。这种抽象有助于使 WebGL 开发更加容易和高效。我们将在下一章讨论几个 WebGL 框架。在这一章中，我们将集中讨论最广泛使用的框架之一——three . js。我们将涵盖以下内容:
- 图书馆的背景
- 如何用 Three.js 开始开发
- 如果不支持 WebGL，则退回到 2D 画布上下文进行渲染
- Three.js API 调用来轻松创建相机、对象和使用光照模型
- 展示与前面章节中的一些例子等价的 Three.js 代码，这些例子使用了直接的低级 WebGL API 调用
- 介绍 tQuery，这是一个将 Three.js 与 jQuery 选择器结合在一起的库
背景
Three.js 由 Ricardo Cabello(又名 Doob 先生)创建，自 2010 年以来一直在 gitHub 上。从那时起，它得到了许多贡献者的额外帮助，它的用户群已经发展到一个很大的规模。
Three.js 提供了几种不同的绘制模式，如果不支持 WebGL，可以退回到 2D 渲染上下文。Three.js 是一个设计良好的库，使用起来相当直观。默认设置减少了所需的初始工作或“样板文件”的数量。设置可以作为对象构造时传入的参数来重写，也可以通过随后调用适当的对象方法来重写。
注意从 WebGL 开始的人可能会有一个错误的观念认为 Three.js 和 WebGL 开发是一回事。就像 JavaScript 框架 jQuery 和 JavaScript 不一样，Three.js(或者其他任何框架)和纯 WebGL 开发也不一样。
如果你精通一门底层语言，你通常可以理解它的框架代码。反之则不然。了解一个框架并不能保证你了解一门语言，所以学习低级语言是非常有益的。
特征
以下是 Three.js 框架众多特性中的一些:
- 当不支持 WebGL 时，优雅地退回到 2D 上下文
- 内置向量和矩阵运算符
- 摄影机、灯光、材质、着色器、对象和常见几何体的 API 包装实现
- 导入和导出实用程序
- 良好的文档和示例
设置
我们现在将讨论如何获得 Three.js 库代码、它的目录结构和核心对象。
获得库
three . js 项目在 https://github.com/mrdoob/three.js 的github 上托管。最新版本可以从https://github.com/mrdoob/three.js/downloads下载。或者，如果您熟悉 git，您可以克隆存储库:
git clonehttps://github . com/mrdoob/3 . js . git。
该库正在积极开发中，对 API 的更改并不少见。最新的完整 API 文档可以在 URL mrdoob.github.com/three.js/docs/latest/,找到，它将重定向到当前版本。在https://github.com/mrdoob/three.js/wiki/有一个 wiki 页面，网上也不乏使用 Three.js 的演示或关于 Three.js 开发的文章。一些较好的文章列在附录 D 中。
目录结构
一旦您下载或克隆了存储库，您就可以将文件放在您的活动开发文件夹中。目录结构显示如下文件夹布局:
/生成源文件的压缩版本
/docs API 文档
/示例示例
/导出 Three.js 源代码的阿桂拖放式 gui 生成器
/src 源代码，包括中央的 Three.js 文件
/utils 实用程序脚本，如导出程序
在 src 目录中，组件被很好地分成以下子文件夹:
/src
/相机相机对象
/core 核心功能，如颜色、顶点、面、矢量、矩阵、数学定义等
/额外的实用程序、助手方法、内置效果、功能和插件
/灯光灯光对象
/材质网格和粒子材质对象，如 Lambert 和 Phong
/objects 物理对象
/renderers 呈现模式对象
/scenes 场景图形对象和雾函数
/textures 纹理对象
Three.js 中心文件
基本要素
Three.js 中有几个核心对象类型(见表 7-1 )。
表 7-1 。Three.js 中的核心对象
| 基础对象 | 描述 |
|---|---|
| 三个。渲染器 | 实际渲染场景的对象。实现可以是 CanvasRenderer、DOMRenderer、SVGRenderer 或 WebGLRenderer。 |
| 三个。事件 | 存储场景中包含的对象和灯光的场景图。 |
| 三个。照相机 | 虚拟相机；可以是透视照相机或正投影照相机。 |
| 三个。对象 3D | 许多对象类型，包括网格，线，粒子，骨骼和精灵。 |
| 三个。光 | 轻型模型。类型可以是环境光、方向光、点光或聚光灯 |
关于对象层次的另外两个注意事项:三。网格对象有一个相关的三个。几何和三。物质对象，依次各三个。几何包含三个。顶点和三。面部物体。
基本用法
现在我们已经获得了 Three.js 库，我们准备开始使用它。我们需要包含来自本地资源的脚本，如下所示:
或者从 github 远程访问，例如:
你好世界 ！
使用 Three.js 与我们到目前为止所做的底层编码相比是非常容易的。虽然已经学习了基本的 WebGL API 调用，但是我们可以在了解(或者至少在不实际检查库代码的情况下假设了解)surface Three.js API 调用下面发生了什么的同时，充分体会到框架的加速。
在我们的第一个例子中，如图 7-1 所示，我们将用 Three.js 渲染一个没有照明的长方体。
图 7-1 。用 Three.js 渲染的矩形长方体。没有光线会使长方体显得扁平
与纯 WebGL 相比，该示例的完整代码相当短(参见清单 7-1 )。我们将在清单之后详细讨论代码的每一部分。
清单 7-1。 渲染一个未点亮的长方形长方体
Three.js 立方体测试版权属于：月萌API www.moonapi.com，转载请注明出处
