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

Question

给定:

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

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

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

知道怎么做吗？

这是图片

Answer 1

您要找的是 orthographic projection .比更笼统的perspective projection更容易理解，尽管您可能也想研究一下。

理解正交投影的直观方法: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 轴，并用 (H=0, H=1, H=2, ...) 的控制标记 ，则 hx 是连续抽动之间的 x 坐标差异，hy 是连续抽动之间的 y 坐标差异。因此，您可以通过调整其方向向量来更改任何轴(独立于其他轴!)的方向和比例。

一旦您选择了原点和方向向量，您就可以计算屏幕坐标 (x, y) 如下:

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

这个公式高度规则的乘法/加法结构基本上是matrix multiplication :

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