javascript - 此代码中的1/cos(x)对于3D Canvas 游戏有何意义？

最近，我一直在尝试HTML5画布，并偶然发现this 3d example后面只有很少的代码。我希望能对3d渲染找到很好的介绍，但是在理解代码背后的几何图形方面比我期望的要麻烦得多。 I set up a JSbin，然后复制其网站上使用的代码。我一直在理解...的含义

deltaX=1/Math.cos(theta);

稍后用于：

    if (deltaX>0) {

        stepX = 1;
        distX = (mapX + 1 - x) * deltaX;
    }
    else {
        stepX = -1;
        distX = (x - mapX) * (deltaX*=-1);
    }

Source

我最好的猜测是，它用于直角三角形中的关系cos(x) = adjacent/hypotenuse，但我根本不知道该三角形适合的位置。

最佳答案

如果从原点(0, 0)沿方向theta绘制一条线（从x轴测量），则


deltaX = 1/cos(theta)是直到垂直线x = 1为止的这条线上的距离，并且
deltaY = 1/sin(theta)是这条线上直到达到水平线y = 1的距离。


确实是三角关系。在第一种情况下，三角形具有点(0, 0)，(1, 0)和线与垂直线(1, y)相交的点x=1。

(mapX, mapY)是具有整数坐标的网格点，(x, y)是正方形[mapX, mapX+1) x [mapY, mapY+1)中的点。

distX计算沿theta方向的下一条垂直网格线的距离，以及distY沿水平的下一条网格线的距离。

备注：如果方向是π/ 2的倍数，即方向完全是右，上，左或下，则计算将失败，因为在这种情况下是sin(theta) = 0或cos(theta) = 0。这可能在您的程序中不会发生，因为playerDirection以0.4开头，并以0.07递增或递减。