javascript - 将 3D 点转换为 2D 点？

Question

鉴于：

p1 = (-10,  2, -0.01)
p2 = (-20, -2, -0.03)

我试图在 3D 矩形中表示这些点，其中我有 3D 矩形的宽度、高度和深度。这里，投影类型是正交的，它是笛卡尔坐标系

通过将 p1 和 p2 转换为 2D，我想画线。

知道怎么做吗？

这是图像

Answer 1

您正在寻找的东西称为正交投影。它比更一般的透视投影更容易理解，尽管您可能也想研究一下。

一种理解正交投影的直观方法：3d 坐标系中的每个轴（例如，您的示例中的 H-、W- 和 D- 轴）在屏幕坐标中都有一个 2d方向矢量(x,y)（即，您用于绘画）：

let:  H-axis direction vector = (hx, hy)
      W-axis direction vector = (wx, wy)
      D-axis direction vector = (dx, dy)

and:  origin screen position = (ox, oy)

要了解这些方向向量的含义：如果您绘制 H 轴，并用 tic 标记它(H=0, H=1, H=2, ...)，那么 hx连续 tic 之间的 x 坐标hy差就是连续 tic 之间 y 坐标的差。因此，您可以通过使用其方向矢量来更改任何轴的方向和比例（独立于其他轴！）。

选择原点和方向向量后，您可以将屏幕坐标计算(x, y)为：

      x = H * hx + W * wx + D * dx + ox
      y = H * hy + W * wy + D * dy + oy

这个公式的高度规则的乘法/加法结构基本上是矩阵乘法：

[ x y ]  =  [ H W D 1 ] * [ hx hy ]
                          [ wx wy ]
                          [ dx dy ]
                          [ ox oy ]

Answer 2

我使用了以下几点，因为它们更容易使用：

p1 = (50, 100, 0)
p2 = (200, 250, 50)

要创建 3D 矩形（立方体），您需要执行以下几个步骤：

• 将这两个点转换为立方体的角点。例如，前右下角的前后坐标为p1，横坐标为p2。
• 使用投影公式进行正交投影。以最简单的形式，您可以使用它：

2D       3D
x   =   x + z
y   =   y - z

• 组成立方体组成的线条，如底部前水平线等。

我不知道 ActionScript，但这里有一个可以帮助您的概念证明：http: //jsfiddle.net/3NLVe/。