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

Question

有很多用于碰撞检测的好东西，例如 threex.colliders 或此处关于问题的代码片段，但实际上大多数东西都是旧的(一些函数如 multiplyVector3 已更改，其他已删除。我有一个 Object3D( Angular 色模型)和一个世界(3D 模型:汽车、树木、建筑物等)。我可以使用箭头键移动 Angular 色(在渲染循环中通过 translateX/Y 移动它。

我想要的是 Angular 色模型和其他一切(地面和其他一些除外)之间的碰撞检测。所以我需要在 Object3D( Angular 色)和 WorldObjects[](所有对象)之间进行碰撞检测。

那么，现在可能有几种方法可以获得想要的结果，哪种方法最好(快速且可读)？现在的问题(也许)是否有效:当 Angular 色与其他任何东西发生碰撞时，我如何才能阻止他可以朝这个方向移动但他可以向右或向左后退？

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 如果盒子相互碰撞/碰撞，则为真。这会让您对如何使用边界框有一个印象。

您还可以检查this example out .我认为这对您非常有用。

编辑:

您也许还应该查看 Physijs three.js 的插件库。

有人拥有 similar question on Stackoverflow您可能想要跟踪的内容。