[置顶] 基于 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 可形成半球体等