基于 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);

这样,HT 的 3D 预定义模型就介绍完了,可以结合 HT 的官方文档(http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html)一起阅读,可能更好理解些。那么在下一章节,我们将会重点介绍 3d Max 设计导出的模型在 HT 中应用。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python数据科学

快速入门Matplotlib教程

Matplotlib 可能是 Python 2D-绘图领域使用最广泛的套件。它能让使用者很轻松地将数据图形化,并且提供多样化的输出格式。这里将会探索 matpl...

521
来自专栏流媒体

流媒体解码及H.264编码推流简介

这里我们使用了FFmpge的sdk和Opencv的sdk。为了方便测试,我们直接使用在线的rtsp网络流。rtmp://live.hkstv.hk.lxdns....

954
来自专栏WOLFRAM

Mathematica之多彩的盒子

1253
来自专栏程序生活

计算两个字符串相(或句子)似度的方法1 编辑距离2 余弦相似度3 FuzzyWuzzy

2673
来自专栏hightopo

基于 HTML5 的 WebGL 技术构建 3D 场景(一)

712
来自专栏数据小魔方

ggplot2双坐标轴的解决方案

本来没有打算写这一篇的,因为在一幅图表中使用双坐标轴确实不是一个很好地习惯,无论是信息传递的效率还是数据表达的准确性而言。 但是最近有好几个小伙伴儿跟我咨询关于...

3579
来自专栏Android知识点总结

D12-Android自定义控件之--二分搜索树

784
来自专栏JadePeng的技术博客

贝叶斯文本分类c#版

关于这个话题,博客园已经有多个版本了 基于朴素贝叶斯分类器的文本分类算法(上) 也谈贝叶斯分类(C#)版本 PyMining-开源中文文本数据挖掘平台 Ver ...

2865
来自专栏Spark学习技巧

干货:基于Spark Mllib的SparkNLP库。

引言 这是来自John Snow Labs工程团队的社区博客和工作,解释了他们对开源Apache Spark自然语言处理(NLP)库的贡献。 Apache Sp...

2028
来自专栏大数据文摘

如何运用Python绘制NBA投篮图表

1938

扫码关注云+社区