Three.js - 用于碰撞检测的精确光线投射

我正在使用 Three.js 版本68。我使用与此人在这里使用的相同的方法进行碰撞检测，这在大多数情况下都很棒（向作者表示深深的“感谢”！）：http://stemkoski.github.io/Three.js/Collision-Detection.html

如果你想从 github 下载它，这里有一个源链接。只要寻找碰撞检测.html: https://github.com/stemkoski/stemkoski.github.com

以下是对于碰撞检测很重要的代码：

var MovingCube;
var collidableMeshList = [];

var wall = new THREE.Mesh(wallGeometry, wallMaterial);
wall.position.set(100, 50, -100);
scene.add(wall);
collidableMeshList.push(wall);
var wall = new THREE.Mesh(wallGeometry, wireMaterial);
wall.position.set(100, 50, -100);
scene.add(wall);

var wall2 = new THREE.Mesh(wallGeometry, wallMaterial);
wall2.position.set(-150, 50, 0);
wall2.rotation.y = 3.14159 / 2;
scene.add(wall2);
collidableMeshList.push(wall2);
var wall2 = new THREE.Mesh(wallGeometry, wireMaterial);
wall2.position.set(-150, 50, 0);
wall2.rotation.y = 3.14159 / 2;
scene.add(wall2);

var cubeGeometry = new THREE.CubeGeometry(50,50,50,1,1,1);
var wireMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe:true } );
MovingCube = new THREE.Mesh( cubeGeometry, wireMaterial );
MovingCube.position.set(0, 25.1, 0);


// collision detection:
//   determines if any of the rays from the cube's origin to each vertex
//      intersects any face of a mesh in the array of target meshes
//   for increased collision accuracy, add more vertices to the cube;
//      for example, new THREE.CubeGeometry( 64, 64, 64, 8, 8, 8, wireMaterial )
//   HOWEVER: when the origin of the ray is within the target mesh, collisions do not occur
var originPoint = MovingCube.position.clone();

for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++)
{       
    var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
    var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
    var directionVector = globalVertex.sub( MovingCube.position );

    var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
    var collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
        appendText(" Hit ");
}

This works great most of the time, but there are times when I can move the cube partially into the wall, and it won't register a collision. For example, look at this image:

它应该在左上角显示“命中”，那里只有一堆点，但事实并非如此。NOTE:我也尝试了他的建议并执行了以下操作，但似乎没有多大帮助：

THREE.BoxGeometry( 64, 64, 64, 8, 8, 8, wireMaterial ) // BoxGeometry is used in version 68 instead of CubeGeometry

有谁知道这种方法如何更准确？另一个问题：有谁知道下面是什么if语句是为了，即为什么物体的距离必须小于方向向量的长度？：

if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() )

首先回答你的最后一个问题：该行检测碰撞是否发生在你的 MovingCube 内部。您的光线投射代码从 MovingCube 的位置向其每个顶点投射光线。返回光线相交的所有内容，以及距找到相交对象的 MovingCube 位置的距离 (collisionResults[0].distance）。该距离与 MovingCube 的位置到相关顶点的距离进行比较。如果到碰撞的距离小于到顶点的距离，则碰撞发生在立方体内部。

光线投射是一种较差的碰撞检测方法，因为它仅检测光线投射的确切方向上的碰撞。它还具有一些额外的边缘情况。例如，如果光线从另一个对象内部投射，则另一个对象可能不会被视为发生碰撞。另一个例子是，Three.js 中的光线投射使用边界球体（或者，如果不可用，则使用边界框）来计算光线相交，因此光线可以与对象“相交”，即使它们在视觉上不会击中对象。

如果您只处理球体或直立的长方体，则检查碰撞是简单的数学运算。 （这就是为什么 Three.js 使用边界球体和边界框 - 并且大多数需要进行碰撞检查的应用程序都使用比渲染几何体简单的仅次要碰撞几何体。）如果球体中心之间的距离小于它们的半径之和。如果边缘重叠，则盒子发生碰撞（例如，如果盒子 1 的左边缘位于盒子 2 右边缘的左侧，并且盒子之间的垂直距离是其半高之和，水平距离是他们的半身长）。

对于某些应用程序，您还可以使用体素，例如将世界划分为立方体单元，进行盒子数学计算，如果两个物体与同一个立方体单元重叠，则称它们发生碰撞。

对于更复杂的应用程序，您可能需要使用 Ammo.js、Cannon.js 或 Physi.js 等库。

光线投射之所以有吸引力，是因为它可以在不使用库的情况下处理更复杂的几何形状。然而，正如您所发现的，它并不完美。 :-)

我写了一本名为《使用 Three.js 进行游戏开发》的书，其中深入探讨了这个主题。 （我不会在这里链接到它，因为我不是在这里宣传它，但如果你感兴趣，你可以谷歌它。）这本书附带了示例代码，展示了如何进行基本的碰撞检测，包括完整的代码3D 夺旗游戏。