| ht.Default.setShape3dModel('button', ht.Default.createRightTriangleModel(true, true)); ht.Default.setShape3dModel('startButton', ht.Default.createSmoothSphereModel(20, 20, 0, Math.PI * 2, 0, Math.PI)); |
根据注册好的模型生成按钮：
| createKeyboard('up', [21.5, 52.5, 26], [0, -Math.PI / 4, 0]); createKeyboard('down', [25.5, 51.75, 26], [0, Math.PI * 3 / 4, 0]); createKeyboard('left', [23.5, 52, 28], [0, Math.PI / 4, 0]); createKeyboard('right', [23.5, 52, 24], [0, Math.PI * 5 / 4, 0]); // 创建开始按钮 function createStartButton() { var node = new ht.Node(); node.setTag('restart'); node.s({ 'shape3d': 'startButton', 'shape3d.reverse.flip': true, 'shape3d.color': '#7ED321', '3d.movable': false, '3d.editable': false }); node.p3([23.5, 52.5, 11]); // 按摆放位置 node.s3([3, 3, 3]); // 按钮放大倍数 dataModel.add(node); } // 创建操作按钮 function createKeyboard(tag, p3, r3) { var node = new ht.Node(); node.setTag(tag); node.s({ 'shape3d': 'button', 'shape3d.reverse.flip': true, 'shape3d.color': 'red', '3d.movable': false, '3d.editable': false }); node.p3(p3); // 按摆放位置 node.s3([1.5, 1.5, 1.5]); // 按钮放大倍数 node.r3(r3); // 将按钮按Y轴旋转，已保存按钮指向正确 dataModel.add(node); } |
最终效果如下：
将 2D 小游戏贴到3D模型上，在文档中我们可以发现 setImage 属性不仅仅是只能设置正常的图片，还可以使用它来注册一个 canvas 图形组件。而2D视图可以通过 getCanvas() 来获取画布信息。
| ht.Default.setImage('gameScrn', g2d.getCanvas()); ht.Default.setShape3dModel('scrn', { vs: vsArr, is: isArr, uv: scrnUV, image: 'gameScrn' // 将注册的2d画布信息当成屏幕的图片贴图信息 }); // 设置 2d 的画布大小 g2d.getWidth = function () { return 1000; } g2d.getHeight = function () { return 600; } g2d.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示 // 设置计时器，让2d画布上的每次改变都能及时的在3D模型上进行展示 setInterval(function () { node.iv(); // 每次改变都需要对街机模型进行刷新，刷新时间为下一帧 g2d.validateImpl(); // 立即对2D上的图元进行刷新 }, 10); // 设置500毫秒后，缩放平移整个2D画布以展示所有的图元 setTimeout(function () { g2d.fitContent(true); }, 500); |
效果如下：
在 2D 画布上，我们已经为游戏添加了键盘事件，现在我们只需要为 3D 模型上的5个按钮分别绑定对应方法即可：
