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

2018-04-28 16:07:19 浏览数 (1)

前言

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

一、 原理分析

我对三维的理解为：所谓三维对象无非是多个二维对象拼接到一起，贴图就更简单了，就是将一张图片贴到对象上。so easy，那么我们就一步步来实现吧。

二、 创建立方体

2.1 立方体对象

这几天干个事，老是说数据立方体数据立方体，还是没有弄太懂什么是数据立方体，但是我完全可以弄个立方体啊。根据上面的分析知道三维与二维没有本质的区别，所以创建立方体同样是new一个Model对象，如下：

代码语言：javascript复制
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的方式来加载对象，本文讲述另外一种方法。

首先将对象加载到场景中：

代码语言：javascript复制
scene = app.scene;

scene.add(cube);

最后对此对象进行各种position、rotation之后将其在场景中显示出来。

代码语言：javascript复制
scene.render();

与之前不同的是此处我们不需要再设置GLSL变量等，查看PhiloGL可知，其中已经包含了一个vs和fs，并且对其进行了自动设置，所以无需在外部再进行设置。

2.3 Cube对象

PhiloGL还写好了一系列的特殊对象类，如Cube、Sphere、IcoSphere、Cone、Cylinder、Plane等。

Cube的创建方法如下：

代码语言：javascript复制
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模块

代码语言：javascript复制
var cube = new PhiloGL.O3D.Cube({
    textures: 'nehe.gif'
});
  • 修改PhiloGL创建代码

在其中添加textures模块，如下：

代码语言：javascript复制
PhiloGL('test1', {
    textures: {
        src: ['nehe.gif']
    },
    onLoad: function (app) {
        ......
    }
});

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

四、 总结

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

kvm

0 人点赞