这篇文章主要讲解了“HTML5怎么实现3 d迷宫”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML5怎么实现3 d迷宫”吧!
功能描述:
左右方向键控制玩家的方向,上下方向键控制玩家的前进和后退。
效果预览:
实现原理:
在上面的效果预览中,可以看到右边是2 d的平面地图,而左边的则是* * *人称的3 d视图,这两幅图的关系是非常密切的,实质上,实现3 d视觉的过程,就是依据2 d地图把地图转换成* * *人称视觉的过程。
在之前的一篇文章:《javascript实现3 d房间》中,3 d效果的实现只局限于平面(意思是从侧面看没有立体效果),在这种有局限性的3 d效果中,我们以一个个物体为单位,通过不同物体平面之间的视觉差实现3 d。而在这次的效果中,为了使物体从不同角度看都能具有立体效果,我们把单位从平面改成线。
首先,我们创建一个叫视觉平面的东西,它像一面镜子,把实物投影到一个平面上,首先初始化该平面的尺寸:
<>之前拉:[320240],//视觉屏幕尺寸之后,我们可以以1像素为单位,只要知道物体每个像素在该视觉平面上显示出来的高度,就可以绘制出物体在* * *人称视觉上的效果。
以视觉平面上的* * *个像素线段为例,根据比例可得知:玩家到视觉平面的距离/玩家到物体的实际距离=物体在视觉平面上的高度/物体的实际高度。由于玩家到视觉平面的距离和物体的实际高度我们可以自己定义,因此我们只要知道玩家到物体的距离,就可以知道物体该像素在视觉平面的高度。
怎样知道玩家到物体的实际距离呢?这时我们就需要借助和3 d视觉图密切相关的2 d地图了。首先,我们定义玩家的* * *视觉角度为60度(意思是玩家的视觉范围角度),由于我们现在处理的是平面的* * *条像素线,因此该像素线相对于玩家的角度就为-30度。在地图上,我们可以知道玩家的X, Y位置和玩家的方向,因此我们就可以知道* * *条像素线在地图上的方向。
在2 d地图上怎么表示3 d视觉平面上的一条像素线呢?null
