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

有很多库为您提供了这一功能,但如果您自己动手,则会更令人满意:

javascript 使用 HTML5 Canvas .你可以看到我的代码 here here 试着理解我下面要讲的内容。。。

基本思想是分步工作。首先,你必须忘记摄像机角度 (yaw, pitch and roll) 当这些稍后出现时,想象一下你正在往下看 y axis

角度计算如下:

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 .

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

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

哪里 width 和 height 是屏幕的尺寸, fov 是摄像机的视场和 yaw 和 pitch

现在,您已经完成了第一个重要步骤,即将三维坐标映射到二维坐标。如果你已经设法让这一切工作,我建议尝试多个点,并连接它们形成形状。另外,试着移动相机的位置,看看透视图是如何变化的,因为你很快就会看到它看起来有多逼真。

此外,如果这对您来说很好,您可以继续让相机不仅能够更改其在3D世界中的位置,而且能够更改其透视图,如中所示 yaw, pitch and roll here

阅读(旧式)OpenGL规范可能会有所帮助:

https://www.khronos.org/registry/OpenGL/specs/gl/glspec14.pdf

见第2.10节

https://www.khronos.org/opengl/wiki/Vertex_Transformation

可能有助于提供更具体的例子。

https://en.wikipedia.org/wiki/Homogeneous_coordinates