将 XYZ 转换为 XY(世界坐标到屏幕坐标)

Kol*_*nya 2 math 3d projection

有没有办法转换该数据:

\n\n
    \n
  • 对象位置是 3D 点(X、Y、Z),
  • \n
  • 相机位置是 3D 点(X、Y、Z),
  • \n
  • 相机偏航、俯仰、横滚(-180:180、-90:90、0)
  • \n
  • 视野(-45\xc2\xb0:45\xc2\xb0)
  • \n
  • 屏幕宽度和高度
  • \n
\n\n

进入屏幕上的 2D 点(X,Y)?

\n\n

我正在根据这组确切的数据寻找正确的数学计算。

\n

Joe*_*don 5

这很难,但是你自己是可以做到的。

有很多库可以为您执行此操作,但如果您自己执行此操作会更令人满意:

这个问题是可能的,我已经编写了自己的 3D 引擎来为javascript使用HTML5 Canvas. 您可以在这里查看我的代码并解决我在这里编写的 3D 迷宫游戏,以尝试理解我下面将要讨论的内容......

基本思想是分步骤进行。首先,你必须忘记相机角度,(yaw, pitch and roll)因为这些稍后会出现,想象你正在俯视y axis。然后基本思想是使用三角函数计算对象坐标的俯仰角和偏航角。我的意思是想象您正在通过信箱查看,偏航角将是从中心/中线到您的坐标左右的角度(因此包括正数和负数)以及从中线向上和向下的偏航。利用这些角度,您可以将它们映射到 x 和 y 2D 坐标系。

角度的计算为:

pitch = atan((coord.x - cam.x) / (coord.y - cam.y))
yaw   = atan((coord.z - cam.z) / (coord.y - cam.y))
Run Code Online (Sandbox Code Playgroud)

其中coord.x, coord.y and coord.z是对象的坐标,与凸轮的坐标相同 ( cam.x, cam.y and cam.z)。这些计算还假设您使用的是笛卡尔坐标系,不同的轴为:z upy forwardx right

从这里开始,下一步是将 3D 世界中的角度映射到可在 2D 图形表示中使用的坐标。

要将这些角度映射到屏幕上,您需要将它们放大为距中线的距离。这意味着将它们乘以您的screen width / fov。最后,这些距离现在将为正或负(因为它是与中线的角度),因此要实际在画布上绘制它,您需要将其添加到屏幕宽度的一半。

所以这意味着你的画布坐标将是:

x = width / 2 + (pitch * (width / fov)
y = height / 2 + (yaw * (height / fov)
Run Code Online (Sandbox Code Playgroud)

其中widthheight是屏幕的尺寸,fov是相机的视场角, 和yawpitch物体与相机的各自角度。

您现在已经迈出了第一步,即将 3D 坐标映射到 2D。如果你已经成功地让这一切正常工作,我建议尝试多个点并将它们连接起来形成形状。还可以尝试移动相机位置以查看视角如何变化,因为您很快就会看到它看起来有多逼真。

此外,如果这对您来说效果很好,您可以继续让相机不仅能够改变其在 3D 世界中的位置,还能改变其视角(如角度)yaw, pitch and roll。我现在不会详细讨论这个问题,但基本思想是使用 3D 世界变换矩阵。您可以在这里阅读有关它们的信息,但它们确实变得非常复杂,但是如果您到目前为止,我可以为您提供计算结果。