线对线交叉仅在一侧起作用

Question

我正在使用 p5js 在 javascript 上创建一个光线投射引擎，但线到线（光线投射到墙）交叉点存在问题。

我发现了很多线对线碰撞算法，包括p5碰撞库，但是每个都出现问题。

   this.intersects = function (raycastStart, raycastEnd) {
        var x1 = this.startPoint.x;  //Start point is the first point of a line.
        var y1 = this.startPoint.y;
        var x2 = this.endPoint.x;  //End point is the second point of a line.
        var y2 = this.endPoint.y;
        var x3 = raycastStart.x;
        var y3 = raycastStart.y;
        var x4 = raycastEnd.x;
        var y4 = raycastEnd.y;

        var a_dx = x2 - x1;
        var a_dy = y2 - y1;
        var b_dx = x4 - x3;
        var b_dy = y4 - y3;
        var s = (-a_dy * (x1 - x3) + a_dx * (y1 - y3)) / (-b_dx * a_dy + a_dx * b_dy);
        var t = (+b_dx * (y1 - y3) - b_dy * (x1 - x3)) / (-b_dx * a_dy + a_dx * b_dy);

        //Vector2 is simply class with two fields: x and y.
        return (s >= 0 && s <= 1 && t >= 0 && t <= 1) ? new Vector2(x1 + t * a_dx, y1 + t * a_dy) : null;
    }

根据我的 y 位置，线对线碰撞在一侧正常工作，但在另一侧工作不正确。

这是我的地图。

一方面它运行良好

但另一方面，它会检查低于我的 Y 位置的线段的碰撞

Answer 1

（我会发表评论，但没有足够的声誉这样做......）

看来您的线路冲突算法正在运行。但似乎缺少的是检查以确定哪个光线投射器到线的交叉点更接近。也就是说，在您的工作示例中，光线投射永远不会跨越两个线段，因此毫无疑问哪个线段会限制您的光线投射。但在您的非工作示例中，raycaster 命中了 4 个线段中的 2 个，因此您现在需要确定 2 个交点中的哪一个更接近 raycast 起点，以确定哪个线段更接近。