javascript - 二维旋转矩形碰撞

Question

我正在尝试测试两个矩形对象(其中一个正在旋转)是否在 JavaScript 中发生碰撞。

这是我正在讨论的内容的屏幕截图。

经过几个小时的在线研究，我仍然想知道检测激光石灰物体是否与蓝色方 block 重叠的最佳方法(算法)是什么。

如果有任何建议，我将不胜感激。

Answer 1

您可以为此使用分离轴定理。基本上，如果 2 个凸多边形(例如矩形)不相交，那么应该至少有一条线(由其中一个多边形延伸到无穷大的边缘形成)，其中一个多边形的所有 Angular 都在它的一侧，另一个多边形的所有 Angular 都在另一边。

您可以使用点积测试点位于直线的哪一侧。一个向量应该是直线的法线，另一个向量应该是从直线上的一点到您正在测试的点的向量。

如果您指定矩形的 Angular 顶点具有恒定的缠绕顺序(例如始终顺时针或始终逆时针)，那么当来自另一个矩形的点位于对应于矩形外部的线。

伪代码:

function hasSeparatingAxis(a, b)
{
    // test each side of a in turn:
    for(i = 0; i < a.side_count; i++)
    {
        normal_x = a.verts[(i+1)%a.side_count].y - a.verts[i].y;
        normal_y = a.verts[i].x - a.verts[(i+1)%a.side_count].x;

        for(j = 0; j < b.side_count; j++)
        {
            dot_product = ((b.vert[j].x - a.verts[i].x) * normal_x) +
                ((b.vert[j].y - a.verts[i].y) * normal_y);
            if(dot_product <= 0.0) // change sign of test based on winding order
                break;
            if(j == b.side_count-1)
                return true; // all dots were +ve, we found a separating axis
        }
   }
   return false;
}

function intersects(a, b)
{
    return !hasSeparatingAxis(a, b) && !hasSeparatingAxis(b, a);
}