线对线相交仅在一侧有效

时间:2019-05-23 15:22:42

标签: javascript p5.js raycasting

我正在使用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位置,线到线碰撞在一侧正常工作,但在另一侧,它工作不正确。

map
这是我的地图。

one side
一方面效果很好

other side 1 other side 2
但是另一方面,它会检查碰撞的线段是否低于我的Y位置

1 个答案:

答案 0 :(得分:0)

(我会发表评论,但是没有足够的声誉来做到这一点...)

看来您的线冲突算法正在工作。但是似乎缺少的是进行检查以确定哪个射线广播器到线的交叉点更近。也就是说,在您的工作示例中,射线投射永远不会投射在两个线段上,因此毫无疑问,哪个线段会限制您的射线投射。但是在您的非工作示例中,光线投射器击中了4个线段中的2个,因此现在您需要确定2个相交点中的哪个更靠近光线投射起点,以便确定哪个线段更靠近。