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) {
		......
	}
});

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

四、 总结

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

posted @ 2017-10-28 15:10  shoufengwei  阅读(353)  评论(0编辑  收藏  举报