前言

上一篇文章中介绍了如何响应鼠标和键盘事件，本文介绍如何加载三维对象并实现给三维对象添加一个漂亮的皮肤。

一、原理分析

我对三维的理解为：所谓三维对象无非是多个二维对象拼接到一起，贴图就更简单了，就是将一张图片贴到对象上。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) {

		......

	}

});

修改完此二者后即可在立方体上看到我们的图片。

四、总结

本文简单介绍了如何创建立方体，如何为立方体添加贴图。随着学习的深入，我的知识也越来越感觉到不足，越来越感觉到自己的无知。吾生也有涯，而知也无涯。有崖的是我的生命，无涯的是我对知识的探索，生命不息，学习不止。下一篇文章介绍如何在三维场景中添加灯光。

巴特西

PhiloGL学习（4）——三维对象、加载皮肤

前言

一、原理分析

二、创建立方体

2.1 立方体对象

2.2 显示

2.3 Cube对象

三、贴图

3.1 为立方体添加贴图

四、总结

最新文章

热门文章

巴特西

PhiloGL学习（4）——三维对象、加载皮肤

前言

一、 原理分析

二、 创建立方体

2.1 立方体对象

2.2 显示

2.3 Cube对象

三、 贴图

3.1 为立方体添加贴图

四、 总结

最新文章

热门文章

一、原理分析

二、创建立方体

三、贴图

四、总结