2.3 一个简单的Three.js网页
WebGL入门指南
好了，我想现在是时候来编写你的第一个 WebGL 程序了。在这一节中，你会看到上手Three.js是一件相当简单的事情。示例2-1实际上是第1章中的那个绘制正方形示例的翻版，但是将代码从150行精简到30行。由此可见，在使用Three.js之后对代码的压缩量之大。
示例2-1 一个简单的Three.js网页
<!DOCTYPE html>
<html>
<head>
<title>A Simple Three.js Page</title>
<script src="../libs/Three.js"></script>
<script>
function onLoad()
{
// 抓取作为Canvas容器的<div>标签
var container = document.getElementById("container");
// 创建Three.js渲染器，并添加到<div>标签中
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild( renderer.domElement );
// 创建Three.js场景
var scene = new THREE.Scene();
// 创建相机，并添加到场景中
var camera = new THREE.PerspectiveCamera( 45,
container.offsetWidth / container.offsetHeight, 1, 4000 );
camera.position.set( 0, 0, 3.3333 );
scene.add( camera );
// 创建一个矩形几何体，并添加到场景中
var geometry = new THREE.PlaneGeometry(1, 1);
var mesh = new THREE.Mesh( geometry,
new THREE.MeshBasicMaterial( ) );
scene.add( mesh );
// 渲染绘制
renderer.render( scene, camera );
}
</script>
</head>
<body onLoad="onLoad();">
<div id="container"
style="width:500px; height:500px; background-color:#000000">
</div>
</body>
</html>
让我们来遍历一下代码，看看它是如何工作的。
首先，我们使用了
然后我们添加了绘制正方形的代码。整个程序都放在了一个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来编写多模块应用。那我为什么还要如此而为呢？这是因为我想要尝试保证尽可能少的改动代码块，使得示例尽量清晰简单。所以，各位资深开发者们，请再忍耐一个章节，结构化的代码稍后奉上。