使用three.js在FPS游戏中进行碰撞检测答案

【问题标题】：Collision Detection in FPS Game using three.js使用three.js在FPS游戏中进行碰撞检测
【发布时间】：2016-06-15 08:29:11
【问题描述】：

我最近一直在尝试修复我的第一人称射击 3.js 游戏中的碰撞检测，但还有一些问题我什至不知道如何修复...

摄像头可以查看墙内
碰撞经常将玩家推到地图之外

我在这里有一个 jsfiddle：http://jsfiddle.net/sxv5fwL4/95/

而且我也收到了关于帖子下的three.js subreddit的一点建议……

"Use of the "stemkoski" collision detection?"

提前感谢您抽出宝贵时间，并感谢 /u/stovenn 在我的 reddit 帖子中提供的帮助。

【问题讨论】：

在这种情况下使用边界框不是更明智吗？
@Wilt 是的，我相信下面的新版本使用了边界框。 steveOw 在帮助我解决我遇到的问题方面确实做得很好。

标签： javascript html three.js collision detection

【解决方案1】：

我认为 /u/stovenn 谈到了这个 git http://stemkoski.github.io/Three.js/

根据 stemkoski git 中的线程 How to detect collision in three.js? 是 three.js 中碰撞检测的工作示例

【讨论】：

没错，这些示例使用边界框。 @AndreasElia 你绝对应该检查这些例子。
@Wilt 实际上，Stemkoski 方法使用的是光线，而不是边界框。
@steveOw 我今天学到了一些新东西。我一直以为这个例子是在内部使用边界框。
大家好，感谢您的回复。是的，stemkoski 在两个网格（墙、立方体）之间使用光线投射，而我在相机和它移动的方向之间进行光线投射。 /u/stovenn 建议我查看位于 stackoverflow.com/questions/25697327/… 我相信的 world-axisaligned bounding-box collision-detection。

【解决方案2】：

这个jsfiddle0（更新版本见答案结尾）是引用的一个黑客版本。地图存在问题，我通过将其读取为 [u][v] 并映射编辑：（u-->z 和 v-->x）来解决此问题。现在代码中的地图布局和模拟中的地图布局是一样的。

我使用了一个非常简单的“(2D) Point in Bounding Box”碰撞测试。它基于测试玩家在每个动画步骤中提出的新位置是否位于墙立方体的 x 范围和 z 范围内。如果是，则拒绝提议的位置，并恢复（存储的）玩家先前的位置。

这里是核心代码：-

if (   tile_x_min <= player_pos_x && player_pos_x <= tile_x_max
    && tile_z_min <= player_pos_z && player_pos_z <= tile_z_max )                              
{
collision_flag = true;
player.velocity.x = 0;
player.velocity.z = 0; 
Message = "IN Wall Cell [" + x + "," + z +  "]" +
"(x:" + tile_pos_x + ", z:" + tile_pos_z + ")";                                           
}

我在玩家位置使用了一个小辅助立方体（“eddie”）并将相机向后移动一点以使其可见。这对故障排除有很大帮助。

如果你愿意，不妨试一试，然后告诉我进展如何。

Edit(1) jsfiddle1 添加播放器/摄像机的简单旋转。使用键 numpad_7 和 numpad_9 左右旋转。

Edit (2) jsfiddle2 响应同时按下的多个键。使用 eddie.visible = false 也可以隐藏 eddie 立方体。

Edit(3) jsfiddle3 添加了独立的摄像机旋转：上-中-下（使用数字键盘键 2、5、8）。播放器+相机的水平旋转是通过数字键 4,6 来实现的。

【讨论】：

哇，这正是我所追求的！谢谢！你知道这种碰撞方法对相机旋转的效果如何吗？好像我需要用相机旋转立方体？
@Andreas Elia 好吧，这取决于需要什么样的旋转以及 PointerLockControls 的设计方式。埃迪目前采用（批准的）球员位置，相机也随之而来。您可以围绕 Eddie y 轴轻松旋转 Eddie(+camera)（例如here），但旋转会改变碰撞模式，因此试验需要包括提议的旋转和提议的平移。它需要被玩弄。
Here 我添加了一个简单的水平旋转（使用键：数字键盘 7 和 9）。您可能想要使用缩放和软糖以及相机视锥体接近值来微调用户体验。注意我不了解 PointerLockControls。 NB 在接受之前没有提议和测试轮换 - 理想情况下应该这样做。
感谢您的帮助，非常感谢。关于使用鼠标进行 PointerLockControls 旋转的“NB”是什么意思？鼠标旋转与键盘旋转有何不同？
@Andreas Elia。没问题我喜欢做这个！嗯，我不记得对鼠标说了什么，只是我没有花时间理解指针锁控制代码，所以我的简单解决方案中的某些内容可能不适合指针锁控制所做的其他事情。最新的 jsfiddle 在我的回答（上图）的 Edit(2) 中。

【解决方案3】：

我正在使用 Ammo.js，这是伟大的 Bullet Physics Library 的一个 emscripten 端口。这是一个专业的开源集合检测库。

这是我创建的示例：physics.autodesk.io

可能对某人有用。

【讨论】：