基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码

拓展

上面只是一个简单的运用，既然可以将 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 场景中，那么我相信像一些日常的机房监控，智能城市和智能楼宇中的视频监控将更加的便捷与直观。