基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测

吃货乙

于 2018-01-09 11:13:53 发布

阅读量580

点赞数

分类专栏： 3D</div> HTML5</div> WebGL</div> SCADA</div> 游戏</div>

本文链接：https://blog.csdn.net/yixiaof/article/details/79010750

版权

本文介绍了如何使用HTML5和WebGL技术，通过HT for Web库，实现第一人称漫游并进行碰撞检测。通过设置第一人称模式，结合getEye和getCenter方法记录和更新位置，同时监听3D属性变化，确保2D界面的实时同步。文章还探讨了在拖拽图元改变大小时保持碰撞检测的方法。

摘要由CSDN通过智能技术生成

为了实现一个基于HTML5的场景小游戏，我采用了HT for Web来实现，短短200行代码，我就能实现用“第一人称”来操作前进后退上下左右，并且实现了碰撞检测。

先来看下实现的效果： http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision

或者http://v.youku.com/v_show/id_XMzA5MzUzODc4NA==.html?spm=a2h3j.8428770.3416059.1视频中出现的帧的问题是我屏幕录制器的问题，真正操作的时候不会有，建议用上面的链接自己操作玩玩，鼠标或者触屏都可以，不过我觉得最方便的还是操作键盘wsad控制上下左右。

我的想法是先把场景布局好，代码如下：

createHT([100, -20, 100], '#E74C3C');                  
createHT([-100, -20, 100], '#1ABC9C');                    
createHT([100, -20, -100], '#3498DB');                   
createHT([-100, -20, -100], '#9B59B6');   
createCurve([0, -20, 0]);
createCircle();

这几个都是自定义的