搜索
首页web前端H5教程详细介绍基于HTML5 的WebGL技术构建3D场景的图文代码(一)

今天和大家分享的是 3D 系列之 3D 预定义模型。

HT for Web 提供了多种基础类型供用户建模使用,不同于传统的 3D 建模方式,HT 的建模核心都是基于 API 的接口方式,通过 HT 预定义的图元类型和参数接口,进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设置。

HT 预定义的 3D 模型有:box、sphere、cone、torus、cylinder、star、rect、roundRect、triangle、tightTriangle、parallelogram 和 trapezoid 这十二种,那么这十二种类型又是怎么设置的呢?

在网络拓扑图 GraphView 的 2D 图形上,呈现各种图形是通过 style 中的 shape 属性决定的,HT 在 3D 上提供了 shape3d 属性预定义多种 3D 形体。shape3d 属性的默认值为 undefined,图元显示为六面立方图形,当 shape3d 指定值时,则显示为 shape3d 指定的形体,接下来我们来一一介绍 3D 模型的各个形体。

1. box:立方体,不同于默认的六面体,立方体类型的六个面颜色和贴图只能相同,绘制性能比默认六面体高;


就如上图所示,左边是 shape3d 设置为 box,右边是默认的六面体,两个节点都对上表面设置了贴图,但是从效果上看 shape3d 设置为 box 的节点直接无视了上表面的贴图设置,这也应证了上面描述的,box 类型六个面的颜色和贴图只能相同,只对 shape3d.image 和 shape3d.color 起效,下面是具体的设置代码:

node = new ht.Node();
node.s3(80, 80, 80);
node.s({    
'shape3d': 'box',    
'shape3d.image': 'img11',    
'shape3d.top.image': 'img10'});
dm.add(node);

node = new ht.Node();
node.s3(80, 80, 80);
node.p3(100, 0, 0);
node.s({    
'all.image': 'img11',    
'top.image': 'img10'});
dm.add(node);

2. sphere:球体,可通过 shape3d.side 分成多片,结合 shape3d.side.from 和 shape3d.side.to 可形成半球体等

就如上图所示,球被裁切掉了一部分,被裁切的两个面可以单独控制,通过 shape3d.from.* 和 shape3d.to.* 两组参数就可以单独控制两面的显示效果,在上图中,我通过 shape3d.to.visible 将 to 的面隐藏了,将 from 面通过 shape3d.from.image 设置了新的贴图,具体代码如下:

node.s({    
'shape3d': 'sphere',    
'shape3d.image': 'img11',    
'shape3d.side': 100,    
'shape3d.side.from': 0,    
'shape3d.side.to': 65,    
'shape3d.from.image': 'img10',    
'shape3d.to.visible': false});

3. cone:锥体,可通过 shape3d.side 形成三角锥、四角锥等形状

从上图可以看到,side 值越大,椎体就越圆滑,完全可以比拟圆锥。具体如何设置的,我们来看看代码:

[3, 4, 5, 6, 10, 20, 40, 80, 100].forEach(function(side, index) {    
var x = ((index / 3) >> 0) * 100 - 100,
        y = index % 3 * 100 - 100;
    node = new ht.Node();
    node.p3(x, 40, y);
    node.s3(80, 80, 80);
    node.s({        
    'shape3d': 'cone',        
    'shape3d.image': 'img11',        
    'shape3d.side': side,        
    'note': 'side: ' + side,        
    'note.autorotate': true,        
    'note.position': 17,        
    'note.face': 'top',        
    'note.background': '#979EAF'
    });
    dm.add(node);
});

当然,椎体也可以和球体一样,可以设置 shape3d.side.from 和 shape3d.side.to 参数来控制裁切;还可以通过 shape3d.from.* 和 shape3d.to.* 参数来控制两个面的表现效果;还可以通过 shape3d.bottom.* 样式来控制椎体地面的表现效果。

在上面的代码中,可以看到 note 相关的设置,在这边也顺带介绍下,note.autorotate 样式是用来控制 note 的朝向,如果设置为 true,那么这个 note 永远是朝向眼睛的方向,不管场景如何旋转。

4. torus:圆环,可通过 shape3d.side 分成多片,结合 shape3d.side.from 和 shape3d.side.to 可形成半圆环等

在上图中可以看出,圆环其实和圆锥是一样的,也是可以设置边数,构成三角环,四角环等形状,当边数达到一定的程度,边数越多,圆环就越平滑。

在上图中可以看到 note 中多加了一个 radius 值的打印,这个值对应的是样式中的 shape3d.torus.radius,那么这个值的作用是什么呢,我想从上图也可以看得出来,radius 值是用来控制圆环的半径,但是为什么 radius 为 0.25 的时候圆环中间就被填上了,没有像其他的圆环中间都漏空呢?我们可以这样理解,一个圆环的切面有两个圆环直径,那就有四个圆环半径,那按百分比去计算的话,一个半径就是占整个图元宽的 1/4,也就是 0.25,所以这个 shape3d.torus.radius 样式的取值范围为 0~0.25。

[3, 4, 5, 6, 10, 20, 40, 80, 100].forEach(function(side, index) {    
var x = ((index / 3) >> 0) * 100 - 100,
        y = index % 3 * 100 - 100;
    radius = (Math.random() * 0.25).toFixed(2);
    node = new ht.Node();
    node.p3(x, 40, y);
    node.s3(80, 80, 80);
    node.s({        
    'shape3d': 'torus',        
    'shape3d.image': 'img11',        
    'shape3d.side': side,        
    'shape3d.torus.radius': radius,        
    'note': 'side: ' + side + ', radius: ' + radius,        
    'note.autorotate': true,        
    'note.position': 17,        
    'note.face': 'top',        
    'note.background': '#979EAF'
    });
    dm.add(node);
});

5. cylinder:圆柱,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

圆柱的参数除了 shape3d.top.* 之外,其他的都和前面提到的圆锥的参数一样,因为圆柱体其实就是比圆锥体多了一个面。

[3, 4, 5, 6, 10, 20, 40, 80, 100].forEach(function(side, index) {    
var x = ((index / 3) >> 0) * 100 - 100,
        y = index % 3 * 100 - 100;
    node = new ht.Node();
    node.p3(x, 40, y);
    node.s3(80, 80, 80);
    node.s({        
    'shape3d': 'cylinder',        
    'shape3d.image': 'img11',        
    'shape3d.side': side,        
    'note': 'side: ' + side,        
    'note.autorotate': true,        
    'note.position': 17,        
    'note.face': 'top',        
    'note.background': '#979EAF'
    });
    dm.add(node);
});

到这里所有的可裁切的基本模型都介绍完了,下面要介绍的几个基本模型就没有 side 的相关属性了,也就意味着,它们将没有 from 和 to 的相关参数,没有裁切的功能。

如果想让不能裁切的基本图元达到裁切的效果,还是有其他方案和方法的,这些,我们就在后续的章节中介绍,还望耐心等待。

6. star:星形体,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

7. rect:矩形体,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

8. roundRect:圆矩形体,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

9. triangle:三角形体,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

10. rightTriangle:直角三角形体,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

11. parallelogram:平行四边形体,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

12. trapezoid:梯形体,可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数

上图就是几个还未介绍的基本模型。

[    'star', 'rect', 'roundRect', 'triangle',    
'rightTriangle', 'parallelogram', 'trapezoid'].forEach(function(shape, index) {    
var x = index * 100 - 300;
    node = new ht.Node();
    node.p3(x, 40, 0);
    node.s3(80, 80, 80);
    node.s({        
    'shape3d': shape,        
    'shape3d.image': 'img11'
    });
    dm.add(node);
});


仔细观察上图,你会发现,从左算起,第二个和第四个好像在前面的例子中有见过。没错,在形状上是一样的,但是在表现上却是有些差异,到底存在什么差异呢,我们通过图来瞧瞧。

左边是基本模型 rect 和 triangle,右边是通过基本模型 cylinder 模拟出来的 rect 和 triangle,四个图元设置的大小都是一样的,边长都是 80,可以发现基本模型 rect 和 triangle 在表现上会比通过 cylinder 模拟出来的 rect 和 triangle 来的大些,原因很简单,通过 cylinder  模拟出来的 rect 和 triangle 因为其本质还是圆柱体,side 参数是是让图形能够更接近圆形而已,所以绘制出来的图形将会是在一个圆柱体内,也就是 rect 基本模型上表面的内切圆范围内,也就是说通过 cylinder 模拟出来的 rect 上表面的对角线才是图元的变成 80。

以下是相关代码,大家可以尝试下,通过不同角度的观察,可能会更好理解一些。

node = new ht.Node();
node.s3(80, 80, 80);
node.p3(-50, 40, 50);
node.s({    
'shape3d': 
'cylinder',    
'shape3d.side': 4,    
'shape3d.image': 'img11'});
dm.add(node);

node = new ht.Node();
node.s3(80, 80, 80);
node.p3(50, 40, 50);
node.s({    
'shape3d': 
'cylinder',    
'shape3d.side': 3,    
'shape3d.image': 'img11'});
dm.add(node);

node = new ht.Node();
node.s3(80, 80, 80);
node.p3(-50, 40, -50);
node.s({    
'shape3d': 'rect',    
'shape3d.image': 'img11'});
dm.add(node);

node = new ht.Node();
node.s3(80, 80, 80);
node.p3(50, 40, -50);
node.s({    
'shape3d': 'triangle',    
'shape3d.image': 'img11'});
dm.add(node);

以上是详细介绍基于HTML5 的WebGL技术构建3D场景的图文代码(一)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是什么意思html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。