如何使用Three.js在JavaScript中检测两个对象之间的碰撞？

Question

有很多关于碰撞检测的优秀资料，例如threex.colliders或者一些问题上的代码片段，但是实际上大部分这些资料都已经过时了（如multiplyVector3等函数已经改变或删除）。我有一个Object3D（角色模型）和一个World（包含3D模型：汽车、树木、建筑等）。通过箭头键，我可以移动角色模型（通过translateX/Y在渲染循环中进行移动）。

我想要的是角色模型和其他所有物体之间的碰撞检测（除了地面和其它一些物体）。因此，我需要在Object3D（角色）和WorldObjects []（所有物体）之间进行碰撞检测。

那么，现在有几种方法可以实现所需的结果，哪种方式最好（快速且易于理解）？如果能够达到目标，问题是：当角色与其他任何物体发生碰撞时，如何阻止他向该方向移动，但又可以向后、右或左移动呢？

- Display Name

Answer 1

您可以通过使用对象的边界框来检测碰撞。边界框是 THREE.Box3 类型的，并具有有用的方法，例如 isIntersectionBox、containsBox 或 containsPoint，当您想要检测碰撞时，它们将满足您所有的需求。

使用它们就像这样简单：

var firstObject = ...your first object...

var secondObject = ...your second object...

firstBB = new THREE.Box3().setFromObject(firstObject);

secondBB = new THREE.Box3().setFromObject(secondObject);

var collision = firstBB.intersectsBox(secondBB);

collision如果为真，表示盒子正在碰撞/相互撞击。 这可以帮助你了解如何使用边界框。

您也可以查看此示例。我认为这对您非常有用。

编辑：

您可能还应该检查一下Physijs库，它是three.js的插件。

有人在Stackoverflow上有类似的问题，您可能想要跟踪一下。

- Wilt

---

不在文档中，这很简单。谢谢！我已经为球体边界框做了（ax - bx）² + (ay - by)² + (az - bz)² < (ar + br)² 的计算。 - Display Name

我现在已经尝试了一下，虽然还不是很完美，但对于我当前的目标来说已经足够了。但是当角色碰到任何物体时，我如何停止它呢？如果渲染循环中有任何碰撞，则collision变量为true，我将使用translateX/Z和if-keypressed（W/A/S/D）将角色移动到该位置。 - Display Name

这段代码仅用于检测碰撞。我猜你得想办法在碰撞为真时停止用于移动的函数。类似于 if(!collision){ ...移动物体... } - Wilt

@DisplayName 我在我的回答中添加了一些可能有用的链接。 - Wilt

THREE.Box3：.isIntersectionBox() 已更名为 .intersectsBox()。 - Anton