《WebGL入门指南》——第2章，第2.3节一个简单的Three.js网页

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

2.3　一个简单的three.js网页

webgl入门指南

好了，我想现在是时候来编写你的第一个 webgl 程序了。在这一节中，你会看到上手three.js是一件相当简单的事情。示例2-1实际上是第1章中的那个绘制正方形示例的翻版，但是将代码从150行精简到30行。由此可见，在使用three.js之后对代码的压缩量之大。

示例2-1　一个简单的three.js网页

让我们来遍历一下代码，看看它是如何工作的。

首先，我们使用了

然后我们添加了绘制正方形的代码。整个程序都放在了一个onload()函数中，并响应页面的onload事件。

在函数体中，我们首先找到页面中用于webgl渲染的元素，并存储在container变量中。然后，我们初始化了three.js的渲染器对象renderer。渲染器负责所有的three.js的绘制工作（当然，是通过webgl上下文来进行的）。我们构建了渲染器对象，并把它设置成和canvas容器相同的尺寸，然后作为一个dom子元素添加到容器中。

然后，我们建立了一个场景（scene）。在three.js中，场景是最高级的对象，用于容纳所有的其他图形对象（three.js中的对象都是作为父子层级存在的，我们在稍后的章节中会进行讲解）。当有了场景之后，我们就可以往里面添加其他的对象：一个相机和一个网格。相机定义了我们从哪里观察场景，在这个示例中，我们通过变换相机的位置属性，把它调整到距离原点3.3333个单位的位置（稍微往后一些）。之后，我们又通过three.js中内置的 planegeometry对象添加了一个1x1大小的矩形。然后通过配置材质来告诉three.js如何对其进行着色。在这个示例中，我们使用的材质类型是meshbasicmaterial（使用单一颜色，比如纯白色）。在three.js中，物体的默认位置都是0,0,0，所以我们的白色矩形将会出现在原点位置。

最后，我们需要渲染整个场景。我们通过调用渲染器的render()方法，来处理场景和相机。

最终的运行结果如图2-1所示。是不是很熟悉呢？

图2-1　使用three.js重新编写的绘制正方形的示例

需要注意的是，three.js紧密的符合了我们在第1章中介绍的图形学的概念：我们处理的是对象（而不是处理那些充满了各种数字的顶点数组），我们通过相机观察场景和物体，使用变换来移动它们，使用材质来定义它们的外观。我们仅仅使用了短短的30行代码，就生成了之前使用原生webgl编写150行代码才生成的图形。

很多老道的web开发者也许已经发现了很多令人不快的地方。首先是对于onload事件的使用；在后面的章节中，我们将不再使用这种方法来检测页面加载，而是启用jquery中的强大的ready()方法。其次，整个程序都放在了一个函数中；显然在编写更复杂的应用时我们无法再这么做。在之后的章节中，我会介绍一个非常简单的框架，以便使用three.js来编写多模块应用。那我为什么还要如此而为呢？这是因为我想要尝试保证尽可能少的改动代码块，使得示例尽量清晰简单。所以，各位资深开发者们，请再忍耐一个章节，结构化的代码稍后奉上。