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 轴，并用 tics 标记它 (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 ]