线与线相交仅在一侧有效

Question

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

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

   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-to-line 交叉点更近的检查。也就是说，在您的工作示例中，光线投射永远不会跨两条线段投射，因此毫无疑问哪个线段会限制您的光线投射。但是在您的 non-working 示例中，光线投射器击中了 4 段中的 2 段，因此您现在需要确定 2 个交点中的哪一个更接近光线投射起点，以确定哪个线段更近。

线与线相交仅在一侧有效

Line to line intersection works only on one side

javascript

raycasting

p5.js