| g3d.mi(function (e) { // addInteractorListener 交互事件监听器的缩写 if (e.kind === 'clickData') { // 判断是否为点击事件 var tag = e.data.getTag(); if (tag === 'restart') { gameAgain(node); } if (start) { if (tag === 'up') { block.setRotation(Math.PI * (1 + rotationNum) / 2); rotationNum++; if (!checkRotation(block)) { // 边缘变形限制 rotationNum--; block.setRotation(Math.PI * rotationNum / 2); } } else if (tag === 'down') { moveBlock('y', offset, block); } else if (tag === 'left') { moveBlock('x', -offset, block); } else if (tag === 'right') { moveBlock('x', offset, block); } } } }); |
到此基本完成了在3D街机上玩游戏的功能。
http://www.hightopo.com/demo/tetris/
拓展
上面只是一个简单的运用，既然可以将 2D 的 canvas 贴到3D上，那么是否也可以将视频贴上去呢。
实现代码如下：
| <video id="video1" width="270" autoplay src="3D交互.mp4" style="display:none"></video> var v = document.getElementById("video1"); var node = new ht.Node(); node.setSize(2200, 1100); gameDM.add(node); v.addEventListener('play', function () { var i = window.setInterval(function () { node.setImage(v);//将视频截图贴在图元上 g2d.validateImpl();//刷新2d画布 g3d.invalidateData(box);//刷新3d图纸中的街机模型 if (v.ended) { clearInterval(i) } }, 20); }, false); |
实现上有什么问题可以直接留言或者私信或者直接去官网（https://hightopo.com/）上查阅相关的资料。
总结
在 3D 模型上的视频播放给予了我很大的兴趣。如果能将摄像头的画面转移到对应的 3D 场景中，那么我相信像一些日常的机房监控，智能城市和智能楼宇中的视频监控将更加的便捷与直观。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
