Question

我正在尝试在平面上检测两个2D对象（例如，两个THREE.CircleGeometry）的碰撞。

我的问题：是否有推荐的方法来检测2D对象碰撞？我有2次尝试，但它们都很糟糕。如果有人以前有这方面的经验，你能帮忙吗？提前谢谢。

这是我的第一次尝试：

//'player' is the Circle that I'm controlling. In the scene, there is another position-fixed circle, called 'target'.
// I hope to cast a ray from player to the target and detect collision.
// 'mouse' is a normalized direction THREE.Vector3()

raycaster.set(player.position, mouse);
var intersects = raycaster.intersectObjects( scene.children );
for ( var i = 0; i < intersects.length; i++ ) {
    console.log("TEST");
    intersects[ i ].object.material.color.set( 0xff0000 );
}

显然这没用。我已经意识到raycaster似乎不适用于2D对象。（我用3D对象测试过，它工作得很好）。

这是第二次尝试：

var dis = distance(target.position, player.position);
if (dis < 1) {
target.material.color.set(0xff0000);
}

此方法有效，我可以检测两个圈子之间的碰撞：玩家和目标。 HOWEVER ，会导致真正糟糕的性能，因为每次渲染（）检查数千个目标绝对没有必要。

如果有人有任何想法或任何推荐阅读，你能告诉我吗？我尝试在线搜索，但大多数教程和示例都是针对3D碰撞。提前谢谢。

Answer 1

我知道这是一篇旧文章，但也许其他人也需要。

我建议您使用第二种方法，但是要使用圈子的一部分。

在一个假设的地图中，您有1000000个障碍物，当然，如果检查与每个障碍物的碰撞，则要在几年后结束，但是如果您在地图上有网格，并将此圆圈放置在对应的单元格中对于位置，您可以比较玩家周围的圆圈，也可以比较玩家所占据的单元格的圆圈。

如果您对此圈子进行简单的碰撞验证，则以快速的方式进行。

Three.js 2D物体与raycaster碰撞

1 个答案: