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

Question

有没有办法转换这些数据:

• 对象位置是一个 3D 点(X、Y、Z)，
• 相机位置是一个 3D 点(X、Y、Z)，
• 相机偏航、俯仰、滚动(-180:180、-90:90、0)
• 视野(-45°:45°)
• 屏幕宽度和高度

进入屏幕上的二维点(X，Y)？

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

Answer 1

这很难，但可以自己做。

有很多库可以为您做这件事，但如果您自己做会更令人满意:

这个问题是可能的，我已经编写了自己的 3D 引擎来为 javascript 中的对象执行此操作使用 HTML5 Canvas .你可以看到我的代码here解决我写的 3D 迷宫游戏 here尝试理解我将在下面谈论的内容......

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

角度的计算是:

pitch = atan((coord.x - cam.x) / (coord.y - cam.y))
yaw   = atan((coord.z - cam.z) / (coord.y - cam.y))

与 coord.x, coord.y and coord.z是物体的坐标，对于凸轮也是如此( cam.x, cam.y and cam.z) 。这些计算还假设您使用的是笛卡尔坐标系，不同的轴是: z up 、 y forward 和 x right 。

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

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

所以这意味着您的 Canvas 坐标将是:

x = width / 2 + (pitch * (width / fov)
y = height / 2 + (yaw * (height / fov)

哪里width和 height是你屏幕的尺寸，fov是相机的 fov 和 yaw和 pitch是物体从相机的各个角度。

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

此外，如果这对您来说效果很好，您可以继续让相机不仅能够改变它在 3D 世界中的位置，还能改变它的视角，如 yaw, pitch and roll 中所示。角度。我现在不会完全讨论这个，但基本思想是使用 3D 世界变换矩阵。您可以阅读有关它们的信息 here但它们确实变得相当复杂，但是如果你做到这一点，我可以给你计算。