如何检测three.js中的碰撞？ [英] How to detect collision in three.js?

问题描述

我正在使用three.js。

I am using three.js.

我的场景中有两个网格几何体。

I have two mesh geometries in my scene.

如果这些几何是相交的（如果翻译，将相交）我想将其检测为碰撞。

If these geometries are intersected (or would intersect if translated) I want to detect this as a collision.

如何进行碰撞检测与three.js？如果three.js没有碰撞检测功能，是否还有其他库可以和three.js一起使用？

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中，似乎不再支持实用程序CollisionUtils.js和Collisions.js，并且mrdoob（three.js的创建者）自己建议更新到最新版本的three.js并使用Ray类来实现此目的代替。接下来是一种方法。

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.

这个想法是这样的：假设我们要检查一个名为Player的给定网格是否与任何网格相交包含在名为collidableMeshList的数组中。我们可以做的是创建一组光线，这些光线从Player网格（Player.position）的坐标开始，并向Player网格几何体中的每个顶点延伸。每个Ray都有一个名为intersectObjects的方法，它返回Ray与之相交的对象数组，以及每个对象的距离（从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.

我已经发布了一个工作示例：

I have posted a working example at:

http://stemkoski.github.io/Three.js/Collision-Detection.html

您可以使用箭头键移动红色线框立方体，并使用W / A / S / D旋转它。当它与其中一个蓝色立方体相交时，如上所述，对于每个交叉点，单词Hit将出现在屏幕顶部一次。代码的重要部分如下。

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.

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）当光线的原点在网格M内时，光线和M之间不会发生碰撞。

(1) When the origin of the ray is within a mesh M, no collision results between the ray and M will be returned.

（2）一个较小的物体（相对于玩家网格物体）可能在各种射线之间滑动，因此不会记录碰撞。减少此问题几率的两种可能方法是编写代码，以便小对象创建光线并从其视角执行碰撞检测工作，或在网格上包含更多顶点（例如，使用CubeGeometry（100,100,100， 20,20,20）而不是CubeGeometry（100,100,100,1,1,1）。）后一种方法可能会导致性能下降，所以我建议谨慎使用它。

(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.

我希望其他人能够通过解决这个问题的方式为这个问题做出贡献。在开发这里描述的解决方案之前，我在这方面挣扎了很长时间。

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.

这篇关于如何检测three.js中的碰撞？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！