11. FPS游戏必备-相机、物体碰撞、重力
11. FPS游戏必备-相机、物体碰撞、重力
本教程翻译自官方教程Cameras, Mesh Collisions and Gravity，各位也可以进入本站镜像站点查看
本文目录
相机、物体碰撞、重力
你玩过FPS（第一人称射击游戏，类似穿越火线，吃鸡）游戏吗？在本章教程中，我们将用相机模拟这个第一人称视角：相机放置在地上，不但与地面接触产生碰撞，并且可能与场景中的任何物体产生碰撞。
我该怎么做？
要实现这个第一人称视角的相机移动，我们需要按照以下3个步骤执行：
1 - 定义和应用重力
首先要做的是定义我们的重力向量，也就是万有引力。在模拟地球这样的典型世界场景中，重力的方向是沿着Y轴朝下，大概是(0, -9.81, 0)，这个重力值是可以随意修改的。
scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
重力能够应用到你之前定义的任何类型相机上：
camera.applyGravity = true;
2 - 定义一个椭圆碰撞边界
接下来的重要步骤就是定义一个椭圆形，让它围绕在我们的相机周围。这个椭圆代表一个玩家的尺寸大小，也就是定义一个碰撞的边界：当一个物体与这个椭圆接触，就会引发一个碰撞事件，从而防止我们的相机离这个物体太近，也就是我们的视角不会穿过这个物体。
Babylon.js相机的椭圆属性默认设置为大小为（0.5，1，0.5），而修改这个向量值会让碰撞边界更高、更大、更小或更瘦，设置的大小会按照指定的轴心进行缩放。在下面的例子中，我们将把相机椭圆边界设置得比默认稍微大一些：
//设置围绕相机的椭圆 (例如玩家的体积)
camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
请注意，相机相对于椭圆有一个偏移量，导致相机的视点总是位于椭圆的顶部。我们能够使用 camera.ellipsoidOffset 属性来控制这个视点的位置，该属性也是一个三维向量Vector3。最终碰撞位置对的计算方式如下所示：
最终碰撞位置finalPosition = 碰撞位置position - vec3(ellipsoid.x, ellipsoid.y, ellipsoid.z) + ellipsoidOffset
3 - 应用碰撞
一旦我们完成了上述的设置，最后步骤就是要开启碰撞检测、并且设置需要碰撞的物体。
// 开启碰撞检测
scene.collisionsEnabled = true;
camera.checkCollisions = true;
声明哪些物体可以和我们的相机产生碰撞：
ground.checkCollisions = true;
box.checkCollisions = true;
就是这么简单
你能体验一下刚才教程中的这个例子，Playground 相机碰撞示例
现在你的相机将因为重力而掉落到地面上，可以通过方向键来移动是相机的位置（需要点击一下canvas，键盘事件才能生效），当相机靠近立方体时，它们会产生一个碰撞，从而阻止你的继续前进。
4 - 物体与物体碰撞
相机可以做第一人称射击游戏，但是比如贪食蛇、赛车等第三人称视角的游戏，怎么办？别担心，Babylon.js可以在物体上实现与相机一样的椭圆碰撞功能，只需要设置 mesh.ellipsoid属性和 **mesh.moveWithCollisions(velocity)**函数即可，此功能将根据给定的速度移动物体，并检查当前物体与激活checkCollisions的所有其他物体之间是否发生碰撞。
当然，你也能使用 mesh.ellipsoidOffset 来移动物体的椭圆碰撞范围的中心（默认情况下，椭圆是在物体的中心）
var speedCharacter = 8;
var gravity = 0.15;
var character = Your mesh;
character.ellipsoid = new BABYLON.Vector3(0.5, 1.0, 0.5);
character.ellipsoidOffset = new BABYLON.Vector3(0, 1.0, 0);
var forwards = new BABYLON.Vector3(parseFloat(Math.sin(character.rotation.y)) / speedCharacter, gravity, parseFloat(Math.cos(character.rotation.y)) / speedCharacter);
forwards.negate();
character.moveWithCollisions(forwards);
// or
var backwards = new BABYLON.Vector3(parseFloat(Math.sin(character.rotation.y)) / speedCharacter, -gravity, parseFloat(Math.cos(character.rotation.y)) / speedCharacter);
character.moveWithCollisions(backwards);
弧形旋转相机ArcRotateCamera
各位可能已经注意了，之前开启碰撞的是通用相机或自由相机，但其实弧形旋转相机也可以检查碰撞，只是发生碰撞的时候，弧形旋转相机不能沿着障碍物进行移动。
要激活碰撞，只需调用camera.checkCollisions = true。 也可以使用以下代码定义碰撞半径：
camera.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5)
下一步
很好 咱们已经可以开发一款实时FPS游戏了！但你是不是想更加深入一下物体之间的碰撞呢？没错，这就是下一章的内容 ,请阅读12. 碰撞检测-让物体之间产生联系。
延伸阅读
贡献者
参与贡献? 联系alexads@foxmail.com