如何检测 three.js 中的碰撞？

Question

我正在使用 three.js。

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

如果这些几何图形相交（或者如果翻译会相交），我想将其检测为碰撞。

我 go 如何与 three.js 执行碰撞检测？ 如果 three.js 没有碰撞检测功能，我是否可以将其他库与 three.js 结合使用？

Answer 1

我正在使用three.js。

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

如果这些几何形状相交（或者如果相交则相交），我想将其检测为碰撞。

如何使用three.js执行碰撞检测？ 如果three.js没有冲突检测工具，那么是否可以将其他库与Three.js结合使用？

Answer 2

我正在使用three.js。

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

如果这些几何形状相交（或者如果相交则相交），我想将其检测为碰撞。

如何使用three.js执行碰撞检测？ 如果three.js没有冲突检测工具，那么是否可以将其他库与Three.js结合使用？

Answer 3

我正在使用three.js。

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

如果这些几何形状相交（或者如果相交则相交），我想将其检测为碰撞。

如何使用three.js执行碰撞检测？ 如果three.js没有冲突检测工具，那么是否可以将其他库与Three.js结合使用？

Answer 4

我正在使用three.js。

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

如果这些几何形状相交（或者如果相交则相交），我想将其检测为碰撞。

如何使用three.js执行碰撞检测？ 如果three.js没有冲突检测工具，那么是否可以将其他库与Three.js结合使用？

Answer 5

Lee 答案的更新版本，适用于最新版本的 three.js

for (var vertexIndex = 0; vertexIndex < Player.geometry.attributes.position.array.length; vertexIndex++)
{       
    var localVertex = new THREE.Vector3().fromBufferAttribute(Player.geometry.attributes.position, index).clone();
    var globalVertex = localVertex.applyMatrix4(Player.matrix);
    var directionVector = globalVertex.sub( Player.position );

    var ray = new THREE.Raycaster( Player.position, directionVector.clone().normalize() );
    var collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
    {
        // a collision occurred... do something...
    }
}

Answer 6

我正在使用three.js。

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

如果这些几何形状相交（或者如果相交则相交），我想将其检测为碰撞。

如何使用three.js执行碰撞检测？ 如果three.js没有冲突检测工具，那么是否可以将其他库与Three.js结合使用？

Answer 7

在我的threejs版本中，我只有geometry.attributes.position.array而不是geometry.vertices 。 要将其转换为顶点，我使用以下 TS 函数：

export const getVerticesForObject = (obj: THREE.Mesh): THREE.Vector3[] => {
  const bufferVertices = obj.geometry.attributes.position.array;
  const vertices: THREE.Vector3[] = [];

  for (let i = 0; i < bufferVertices.length; i += 3) {
    vertices.push(
      new THREE.Vector3(
        bufferVertices[i] + obj.position.x,
        bufferVertices[i + 1] + obj.position.y,
        bufferVertices[i + 2] + obj.position.z
      )
    );
  }
  return vertices;
};

我为每个维度传递对象的位置，因为默认情况下 bufferVertices 是相对于对象的中心的，出于我的目的，我希望它们是全局的。

我还写了一个小函数来检测基于顶点的碰撞。 它可以选择对非常复杂的对象的顶点进行采样，或者检查所有顶点与另一个对象的顶点的接近程度：

const COLLISION_DISTANCE = 0.025;
const SAMPLE_SIZE = 50;
export const detectCollision = ({
  collider,
  collidables,
  method,
}: DetectCollisionParams): GameObject | undefined => {
  const { geometry, position } = collider.obj;
  if (!geometry.boundingSphere) return;

  const colliderCenter = new THREE.Vector3(position.x, position.y, position.z);
  const colliderSampleVertices =
    method === "sample"
      ? _.sampleSize(getVerticesForObject(collider.obj), SAMPLE_SIZE)
      : getVerticesForObject(collider.obj);

  for (const collidable of collidables) {
    // First, detect if it's within the bounding box
    const { geometry: colGeometry, position: colPosition } = collidable.obj;
    if (!colGeometry.boundingSphere) continue;
    const colCenter = new THREE.Vector3(
      colPosition.x,
      colPosition.y,
      colPosition.z
    );
    const bothRadiuses =
      geometry.boundingSphere.radius + colGeometry.boundingSphere.radius;
    const distance = colliderCenter.distanceTo(colCenter);
    if (distance > bothRadiuses) continue;

    // Then, detect if there are overlapping vectors
    const colSampleVertices =
      method === "sample"
        ? _.sampleSize(getVerticesForObject(collidable.obj), SAMPLE_SIZE)
        : getVerticesForObject(collidable.obj);
    for (const v1 of colliderSampleVertices) {
      for (const v2 of colSampleVertices) {
        if (v1.distanceTo(v2) < COLLISION_DISTANCE) {
          return collidable;
        }
      }
    }
  }
};

Answer 8

你可以试试cannon.js 。它使碰撞变得容易，它是我最喜欢的碰撞检测库。 还有ammo.js。