PhiloGL学习（4）——三维对象、加载皮肤
前言
上一篇文章中介绍了如何响应鼠标和键盘事件，本文介绍如何加载三维对象并实现给三维对象添加一个漂亮的皮肤。
一、 原理分析
我对三维的理解为：所谓三维对象无非是多个二维对象拼接到一起，贴图就更简单了，就是将一张图片贴到对象上。so easy，那么我们就一步步来实现吧。
二、 创建立方体
2.1 立方体对象
这几天干个事，老是说数据立方体数据立方体，还是没有弄太懂什么是数据立方体，但是我完全可以弄个立方体啊。根据上面的分析知道三维与二维没有本质的区别，所以创建立方体同样是new一个Model对象，如下：
var cube = new PhiloGL.O3D.Model({
vertices: [-1, -1, 1,
1, -1, 1,
1, 1, 1,
-1, 1, 1,
-1, -1, -1,
-1, 1, -1,
1, 1, -1,
1, -1, -1,
-1, 1, -1,
-1, 1, 1,
1, 1, 1,
1, 1, -1,
-1, -1, -1,
1, -1, -1,
1, -1, 1,
-1, -1, 1,
1, -1, -1,
1, 1, -1,
1, 1, 1,
1, -1, 1,
-1, -1, -1,
-1, -1, 1,
-1, 1, 1,
-1, 1, -1],
colors: [1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
1, 0.5, 0.5, 1,
1, 0.5, 0.5, 1,
1, 0.5, 0.5, 1,
1, 0.5, 0.5, 1,
1, 0, 1, 1,
1, 0, 1, 1,
1, 0, 1, 1,
1, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1],
indices: [0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11,
12, 13, 14, 12, 14, 15,
16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23]
});
在vertices中每三个数据构成一个点，每四个点构成一个平面，六个面拼接到一起即构成一个立方体。
colors同样如此，四个数据表达一个顶点的颜色，每四个颜色构成一个面的颜色，总共表达出了六个面的颜色。
indices我理解是顶点的序列，印象中在计算机图形学中面都是由三角形来表达的，WebGL也不例外，每个面都是由多个三角形拼接成的，长方形是由两个三角形拼成，此处的顶点序列就表达出了面的构成顺序，即三角形的拼接顺序，这个顺序不能出错，否则会造成面不完整。当然，我对这块也不是很熟悉，如果有更专业的解释，欢迎留言。
2.2 显示
有了cube对象之后下一步就是把它显示出来。之前文章中讲述的是通过gl.drawArrays的方式来加载对象，本文讲述另外一种方法。
首先将对象加载到场景中：
scene = app.scene;
scene.add(cube);
最后对此对象进行各种position、rotation之后将其在场景中显示出来。
scene.render();
与之前不同的是此处我们不需要再设置GLSL变量等，查看PhiloGL可知，其中已经包含了一个vs和fs，并且对其进行了自动设置，所以无需在外部再进行设置。
2.3 Cube对象
PhiloGL还写好了一系列的特殊对象类，如Cube、Sphere、IcoSphere、Cone、Cylinder、Plane等。
Cube的创建方法如下：
var cube = new PhiloGL.O3D.Cube({
colors: [1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
1, 0.5, 0.5, 1,
1, 0.5, 0.5, 1,
1, 0.5, 0.5, 1,
1, 0.5, 0.5, 1,
1, 0, 1, 1,
1, 0, 1, 1,
1, 0, 1, 1,
1, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1]
});
此对象无需再设置vertices和indices，这些值已经在Cube中预定义好了，我们只需要设置其颜色即可。其调用等与之前定义的cube对象完全一致。
三、 贴图
3.1 为立方体添加贴图
我们直接为用Cube定义的cube对象添加贴图，其他的也基本一致。
首先，找到一副图片，没有要求，此处假设为nehe.gif。有了该图片之后即可开始添加贴图。
- 修改cube创建代码
去除colors模块，添加textures模块
var cube = new PhiloGL.O3D.Cube({
textures: 'nehe.gif'
});
- 修改PhiloGL创建代码
在其中添加textures模块，如下：
PhiloGL('test1', {
textures: {
src: ['nehe.gif']
},
onLoad: function (app) {
......
}
});
修改完此二者后即可在立方体上看到我们的图片。
四、 总结
本文简单介绍了如何创建立方体，如何为立方体添加贴图。随着学习的深入，我的知识也越来越感觉到不足，越来越感觉到自己的无知。吾生也有涯，而知也无涯。有崖的是我的生命，无涯的是我对知识的探索，生命不息，学习不止。下一篇文章介绍如何在三维场景中添加灯光。
