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

本篇文章主要介绍了" 基于 HTML5 的 WebGL 技术构建 3D 场景（一）"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下： 今天和大家分享的是 3D 系列之 3D 预定义模型。HT for Web 提供了多种基础类型供用户建模使用，不同于传统的 3D 建模方式，HT 的建模核心都是基...

今天和大家分享的是 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 值越大，椎体就越圆滑，完全可以比拟圆锥。具体如何设置的，我们来看看代码：