一个使用物理引擎的WebGL3D场景

　　这是一个类似第三人称射击游戏（TPS）的3D场景，可以通过https://ljzc002.github.io/FPS2/index.html访问。场景运行效果如下图：

　　场景环境由一个天空盒和一个地面网格组成，屏幕中央是准星，左下部带有纹理的球体代表玩家模型，玩家模型外的绿网是玩家模型的物理仿真器，玩家模型的背部的随机字符表示玩家id，玩家模型的右前方是一个枪械模型，每隔一段时间场景中刷新一个球体网格代表射击目标，场景的右上角是一个以玩家为中心的小地图。

　　直接移动鼠标即可调整游戏视角，使用WASD控制前后左右移动，按下空格玩家可以跳起，玩家碰到目标物体会被挡住，按下鼠标左键枪械会进行射击动作，如果击中目标物体则目标物体会消失。

　　场景的构建基于Babylon.js库，为了给物体的运动赋予物理效果，我在场景中使用了cannon物理引擎。在基于Babylon.js库的WebGL场景中模拟物理效果的常见方法有三种，第一是使用Babylon.js内置的相机碰撞检测和重力模拟来操纵相机的位置（可以参考http://doc.babylonjs.com/tutorials/cameras,_mesh_collisions_and_gravity的官方教程），这种方法在一些简单的3D示例中非常常见，但是相机碰撞检测在需要呈现玩家自身模型时的表现并不理想，因为Babylon.js的渲染流程是先计算网格的位置再计算相机的视角，如果让物体跟随相机运动，在每一帧中物体的位置都会略微滞后于相机的位置，进而产生画面抖动，并且相机碰撞检测本身的功能也并不完善，且个性化定制较为困难，所以这种方法不适用于复杂场景。

　　第二种模拟物理效果的方法是结合使用Babylon.js内置的moveWithCollisions方法和自定义的运动控制方法来对物体的位置进行控制，然后让相机跟随物体运动，这种方法能够提供给编程者足够的自由定制空间，且足以应对一般的场景浏览需求，但在涉及到复杂碰撞、反弹等情况时需要编程者自己编写一个类似物理引擎的东西。（简单用法可以参考我的博客中的例子http://www.cnblogs.com/ljzc002/p/6029095.html）

　　第三种就是使用物理引擎对物体的位置和姿态进行较为精确的计算，然后让相机跟随物体，Babylon.js内置了三种物理引擎的接口，可以方便的将物理计算添加到每一帧的渲染中。但是使用物理引擎的缺点也非常明显——物理引擎过于“叫真”，比如这个场景中的玩家物体被定义为了一个体重为70KG、具有少许摩擦力和弹性的球体，这时如果你像前两种方法一样通过在每一帧修改玩家的position属性来改变玩家的位置，你会发现玩家并没有像想象中那样直线移动过去，而是按照一个球体应该表现的那样一路滚动过去，到达目标位置后玩家也不会停止而是在惯性的作用下继续滚动，好吧，我们的可怜的玩家已经晕车了。（物理引擎的基本用法可以参考http://doc.babylonjs.com/overviews/using_the_physics_engine）

　　针对这一情况我在网上找到了两种解决方案，其一是把物理仿真器网格和玩家模型网格剥离开，物理仿真器负责在场景中做物理滚动，玩家模型则只需要与物理仿真器保持位置相同，而玩家模型的姿态则由相机视角控制不受物理仿真器影响，这也是我这个TPS场景所使用的方式；第二种方案则是使用物理引擎中的“接头”和“马达”功能，大意是由马达负责把物体的线运动转化为轮子的角运动，再通过接头带动玩家模型的主体部分，但是三种物理引擎对马达和接头的定义并不完全相同，这给我们的使用带来了一些局限性。

　　这个场景的编写参考了http://www.pixelcodr.com/tutos/shooter/shooter.html、https://blog.raananweber.com/2016/09/06/webgl-car-physics-using-babylon-js-and-oimo-js/、https://spritehand.blob.core.windows.net/babyloncharacterwalk/index.html(这篇教程的原网址找不到了，暂时把demo放在这里)三篇教程，场景中用到的各项技术在这三篇教程和官方教程中都能找到解释这里就不再重复，它们相关的简单翻译可以在这里找到：http://files.cnblogs.com/files/ljzc002/shooter.rar，在此对这三个demo作者的无私奉献表示感谢。场景的完整代码可以在我的github下载：https://github.com/ljzc002/ljzc002.github.io。

　　

　　

 

更多专业前端知识，请上 【猿2048】www.mk2048.com