2

我最近一直在试验 HTML5 画布，并遇到了这个 3d 示例，其背后的代码相对较少。我希望找到一个很好的 3d 渲染介绍，但我在理解代码背后的几何图形时遇到了比我预期的更多的麻烦。我设置了一个 JSbin并复制了他网站上用来玩的代码。我一直在理解

deltaX=1/Math.cos(theta);

后来用于：

    if (deltaX>0) {

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

来源

我最好的猜测是它用于cos(x) = adjacent/hypotenuse直角三角形中的关系，但我不明白三角形适合的位置，如果有的话。

4

1 回答 1

4

如果你从原点画一条(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。

于 2013-03-17T11:39:23.783 回答