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

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

四、 总结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Arcgis for Js之Graphiclayer扩展详解

在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实...

24030
来自专栏数据魔术师

运筹学教学|分支定界法解带时间窗的车辆路径规划问题(附代码及详细注释)

823100
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (9)---交互式报表之动态排序

在葡萄城ActiveReports报表中除了提供对数据源进行排序的功能之外,还提供了最终用户排序功能,最终用户可以对报表进行区域内排序和整个数据源排序,结合数据...

190100
来自专栏tkokof 的技术,小趣及杂念

iTween那些事儿(二)

  上次我们简单浏览了一番iTween的使用和原理,这次我们换个角度,转而看看iTween目前存在的一些缺陷以及一点点可能的改进之处,当然,这些所谓的缺陷或者改...

9010
来自专栏积累沉淀

Java设计模式(十三)----策略模式

策略模式 一、概述 二、策略模式的结构 三、具体案例 四、认识策略模式 一、概述 1.定义 策略模式属于对象行为型模式,主要针对一组算法...

24760
来自专栏Modeng的专栏

Vue一个案例引发的递归组件的使用

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之...

18910
来自专栏SAP最佳业务实践

想学FM系列(19)-SAP FM模块:派生规则推导策略(2)-派生规则推导步骤-分配、表格查询

4.1.2 分配 分配:是推导过程中给某一字段赋值,如同 A = B 一样赋值。字段可以是源数据,也可以是辅助数据,也可以是目标数据。设置见下图 定义: ? ①...

67860
来自专栏数据结构与算法

2017 清北学堂 Day 6终极考试报告

预计分数: 100+70+70 = 240 实际假分数 : 40+80+70= 190  in cena(好吧不得不承认这个分数,,,,,,=.=) 实际真分数...

33630
来自专栏圣杰的专栏

EF Core中避免贫血模型的三种行之有效的方法

17540
来自专栏数据结构与算法

洛谷P2704 [NOI2001]炮兵阵地(状压dp)

司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队。一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示)...

10020

扫码关注云+社区

领取腾讯云代金券