与 2D 一样，我们创建一个 ht.Node() 的基础图元，类型设置为我们新注册的3D模型名称：
| dataModel = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dataModel); g3d.addToDOM(); var node = new ht.Node(); node.s({ 'shape3d': 'damBoard', 'shape3d.reverse.flip': true, '3d.movable': false, '3d.editable': false, '3d.selectable': false }); node.p3([0, 20, 0]); node.s3([100, 100, 100]); dataModel.add(node); |
已经有个侧边了，我们可以将坐标系延z轴移动一定距离后得到另一个侧边的坐标数组同时再根据没个面的不同，分别设置 is 数组，将所有的面组合起来后，我们就将初步得到一个街机模型：
| vs: [ 0, 0, 0, //0 0.23, 0, 0, 0.23, 0.27, 0, 0.27, 0.28, 0, //3 0.27, 0.32, 0, 0.20, 0.33, 0, 0.18, 0.51, 0, // 6 0.27, 0.57, 0, 0.27, 0.655, 0, 0.20, 0.67, 0, // 9 0, 0.535, 0, 0, 0, 0.4, //11 0.23, 0, 0.4, 0.23, 0.27, 0.4, 0.27, 0.28, 0.4, //14 0.27, 0.32, 0.4, 0.20, 0.33, 0.4, 0.18, 0.51, 0.4, // 17 0.27, 0.57, 0.4, 0.27, 0.655, 0.4, 0.20, 0.67, 0.4, // 20 0, 0.535, 0.4, ] |
模型不够美观，我们可以给模型的每个面进行贴图，参考文档中对模型 uv 参数的说明，我们可以知道 uv 对应的是模型中每个顶点在图片中的偏移量，图片的左上角为(0, 0)右下角为(1，1)， 以此我们可以为每个面设置贴图。如：
| ht.Default.setShape3dModel('damBoard', { vs: vsArr, is: isArr, uv: [ 0, 1, 0.81, 1, 0.81, 0.42, 1, 0.4, 1, 0.36, 0.725, 0.34, 0.65, 0.26, 1, 0.16, 1, 0.03, 0.75, 0, 0, 0.22, , , , , , , , , , , , , , , , , , , , , , , ], //uv中要将is中有使用到的点的偏移量都进行设值 image: '/image/side1.jpg' //图片地址 }); |
同理，为其他面也分别设置 uv，最终效果如下：
3D 模型整体已经建好了， 还需要给模型加上游戏按钮。在官方文档建模函数中，我们可以看到已经有大量封装完毕的图形供我们使用。在这里我选择使用 createRightTriangleModel 创建直角三角形的方法来创建操作按钮，使用 createSmoothSphereModel 函数来创建开始按钮：
