Javascript 如何检测three.js中的碰撞？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11473755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect collision in three.js?
提问by eqiproo
I am using three.js.
我正在使用three.js。
I have two mesh geometries in my scene.
我的场景中有两个网格几何体。
If these geometries are intersected (or would intersectif translated) I want to detect this as a collision.
如果这些几何图形相交（或者如果平移会相交），我想将其检测为碰撞。
How do I go about performing collision detection with three.js? If three.js does not have collision detection facilities, are there other libraries I might use in conjuction with three.js?
我如何使用three.js 执行碰撞检测？如果three.js 没有碰撞检测功能，还有其他可以与three.js 结合使用的库吗？
回答by Lee Stemkoski
In Three.js, the utilities CollisionUtils.js and Collisions.js no longer seem to be supported, and mrdoob (creator of three.js) himself recommends updating to the most recent version of three.js and use the Ray class for this purpose instead. What follows is one way to go about it.
在 Three.js 中，实用程序 CollisionUtils.js 和 Collisions.js 似乎不再受支持，并且 mrdoob（three.js 的创建者）本人建议更新到 Three.js 的最新版本并为此使用 Ray 类反而。下面是实现它的一种方法。
The idea is this: let's say that we want to check if a given mesh, called "Player", intersects any meshes contained in an array called "collidableMeshList". What we can do is create a set of rays which start at the coordinates of the Player mesh (Player.position), and extend towards each vertex in the geometry of the Player mesh. Each Ray has a method called "intersectObjects" which returns an array of objects that the Ray intersected with, and the distance to each of these objects (as measured from the origin of the Ray). If the distance to an intersection is less than the distance between the Player's position and the geometry's vertex, then the collision occurred on the interior of the player's mesh -- what we would probably call an "actual" collision.
这个想法是这样的：假设我们想要检查一个名为“Player”的给定网格是否与包含在名为“collidableMeshList”的数组中的任何网格相交。我们可以做的是创建一组光线，这些光线从 Player 网格的坐标 (Player.position) 开始，并延伸到 Player 网格几何体中的每个顶点。每个射线都有一个称为“intersectObjects”的方法，它返回一个与射线相交的对象数组，以及到这些对象中的每一个的距离（从射线的原点开始测量）。如果到交叉点的距离小于玩家位置和几何体顶点之间的距离，那么碰撞发生在玩家网格的内部——我们可能称之为“实际”碰撞。
I have posted a working example at:
我在以下位置发布了一个工作示例：
http://stemkoski.github.io/Three.js/Collision-Detection.html
http://stemkoski.github.io/Three.js/Collision-Detection.html
You can move the red wireframe cube with the arrow keys and rotate it with W/A/S/D. When it intersects one of the blue cubes, the word "Hit" will appear at the top of the screen once for every intersection as described above. The important part of the code is below.
您可以使用箭头键移动红色线框立方体并使用 W/A/S/D 旋转它。当它与一个蓝色立方体相交时，如上所述，对于每个相交，屏幕顶部都会出现一次“命中”一词。代码的重要部分如下。
for (var vertexIndex = 0; vertexIndex < Player.geometry.vertices.length; vertexIndex++)
{
var localVertex = Player.geometry.vertices[vertexIndex].clone();
var globalVertex = Player.matrix.multiplyVector3(localVertex);
var directionVector = globalVertex.subSelf( Player.position );
var ray = new THREE.Ray( Player.position, directionVector.clone().normalize() );
var collisionResults = ray.intersectObjects( collidableMeshList );
if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() )
{
// a collision occurred... do something...
}
}
There are two potential problems with this particular approach.
这种特殊方法有两个潜在的问题。
(1) When the origin of the ray is within a mesh M, no collision results between the ray and M will be returned.
(1)当射线的原点在网格M内时，不返回射线与M的碰撞结果。
(2) It is possible for an object that is small (in relation to the Player mesh) to "slip" between the various rays and thus no collision will be registered. Two possible approaches to reduce the chances of this problem are to write code so that the small objects create the rays and do the collision detection effort from their perspective, or include more vertices on the mesh (e.g. using CubeGeometry(100, 100, 100, 20, 20, 20) rather than CubeGeometry(100, 100, 100, 1, 1, 1).) The latter approach will probably cause a performance hit, so I recommend using it sparingly.
(2) 较小的物体（相对于 Player 网格）可能会在各种光线之间“滑动”，因此不会记录碰撞。减少此问题发生几率的两种可能方法是编写代码以便小对象创建光线并从它们的角度进行碰撞检测工作，或者在网格上包含更多顶点（例如使用 CubeGeometry(100, 100, 100, 20, 20, 20) 而不是 CubeGeometry(100, 100, 100, 1, 1, 1).) 后一种方法可能会导致性能下降，所以我建议谨慎使用它。
I hope that others will contribute to this question with their solutions to this question. I struggled with it for quite a while myself before developing the solution described here.
我希望其他人通过他们对这个问题的解决方案来为这个问题做出贡献。在开发这里描述的解决方案之前，我自己已经挣扎了很长一段时间。
回答by Toji
This really is far too broad of a topic to cover in a SO question, but for the sake of greasing the SEO of the site a bit, here's a couple of simple starting points:
这确实是一个太广泛的主题，无法在 SO 问题中涵盖，但为了稍微增加网站的 SEO，这里有几个简单的起点：
If you want really simple collision detection and not a full-on physics engine then check out (link removed due to no more existing website)
如果您想要真正简单的碰撞检测而不是完整的物理引擎，请查看（由于不再存在网站，链接已删除）
If, on the other hand you DO want some collision response, not just "did A and B bump?", take a look at Physijs, which is a super easy to use Ammo.js wrapper built around Three.js
另一方面，如果您确实想要一些碰撞响应，而不仅仅是“A 和 B 碰撞了吗？”，请查看Physijs，它是围绕 Three.js 构建的超级易于使用的 Ammo.js 包装器
