详细介绍基于HTML5的WebGL技术构建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({    
&＃39;shape3d&＃39;: &＃39;box&＃39;,    
&＃39;shape3d.image&＃39;: &＃39;img11&＃39;,    
&＃39;shape3d.top.image&＃39;: &＃39;img10&＃39;});
dm.add(node);

node = new ht.Node();
node.s3(80, 80, 80);
node.p3(100, 0, 0);
node.s({    
&＃39;all.image&＃39;: &＃39;img11&＃39;,    
&＃39;top.image&＃39;: &＃39;img10&＃39;});
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({    
&＃39;shape3d&＃39;: &＃39;sphere&＃39;,    
&＃39;shape3d.image&＃39;: &＃39;img11&＃39;,    
&＃39;shape3d.side&＃39;: 100,    
&＃39;shape3d.side.from&＃39;: 0,    
&＃39;shape3d.side.to&＃39;: 65,    
&＃39;shape3d.from.image&＃39;: &＃39;img10&＃39;,    
&＃39;shape3d.to.visible&＃39;: 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({        
    &＃39;shape3d&＃39;: &＃39;cone&＃39;,        
    &＃39;shape3d.image&＃39;: &＃39;img11&＃39;,        
    &＃39;shape3d.side&＃39;: side,        
    &＃39;note&＃39;: &＃39;side: &＃39; + side,        
    &＃39;note.autorotate&＃39;: true,        
    &＃39;note.position&＃39;: 17,        
    &＃39;note.face&＃39;: &＃39;top&＃39;,        
    &＃39;note.background&＃39;: &＃39;#979EAF&＃39;
    });
    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({        
    &＃39;shape3d&＃39;: &＃39;torus&＃39;,        
    &＃39;shape3d.image&＃39;: &＃39;img11&＃39;,        
    &＃39;shape3d.side&＃39;: side,        
    &＃39;shape3d.torus.radius&＃39;: radius,        
    &＃39;note&＃39;: &＃39;side: &＃39; + side + &＃39;, radius: &＃39; + radius,        
    &＃39;note.autorotate&＃39;: true,        
    &＃39;note.position&＃39;: 17,        
    &＃39;note.face&＃39;: &＃39;top&＃39;,        
    &＃39;note.background&＃39;: &＃39;#979EAF&＃39;
    });
    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({        
    &＃39;shape3d&＃39;: &＃39;cylinder&＃39;,        
    &＃39;shape3d.image&＃39;: &＃39;img11&＃39;,        
    &＃39;shape3d.side&＃39;: side,        
    &＃39;note&＃39;: &＃39;side: &＃39; + side,        
    &＃39;note.autorotate&＃39;: true,        
    &＃39;note.position&＃39;: 17,        
    &＃39;note.face&＃39;: &＃39;top&＃39;,        
    &＃39;note.background&＃39;: &＃39;#979EAF&＃39;
    });
    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.* 可控制顶面和底面的参数

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

[    &＃39;star&＃39;, &＃39;rect&＃39;, &＃39;roundRect&＃39;, &＃39;triangle&＃39;,    
&＃39;rightTriangle&＃39;, &＃39;parallelogram&＃39;, &＃39;trapezoid&＃39;].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({        
    &＃39;shape3d&＃39;: shape,        
    &＃39;shape3d.image&＃39;: &＃39;img11&＃39;
    });
    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({    
&＃39;shape3d&＃39;: 
&＃39;cylinder&＃39;,    
&＃39;shape3d.side&＃39;: 4,    
&＃39;shape3d.image&＃39;: &＃39;img11&＃39;});
dm.add(node);

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

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

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

以上就是详细介绍基于HTML5 的WebGL技术构建3D场景的图文代码（一）的详细内容，更多请关注其它相关文章！