Javascript 将X Y Z坐标转换为屏幕X Y坐标有什么问题？

我正在制作一个HTML5画布演示，演示球体在3D空间中的弹跳。这很简单。每个球都有X、Y和Z坐标。这些坐标然后被转换成屏幕上的X和Y坐标，我在这里读到

我从上面的链接得到的，将X，Y，Z坐标转换成X和Y的公式是

screenX = (depth/(Z+depth)) * X
screenY = (depth/(Z+depth)) * Y

我在这里展示了JSFIDLE中的工作代码

但这里有些不对劲。你能告诉我我做错了什么吗？

目前你的原点（origo）在左上角。投影

x

和

y

以使原点或此处：笛卡尔坐标

[0,0,0]

位于屏幕中心：

f = fieldOfView / (viewDistance + z);
px = x * f + screenWidth * 0.5;
py = y * f + screenHeight * 0.5;

• fieldOfView

  与焦距有关，例如128-256

• viewdance

  转换

  z

  值

• px

  和

  py

  是投影的二维坐标

如果所有坐标都是正值，它们将绘制在原点的右/底侧，因此需要使用负值在原点的左/顶侧绘制一些内容

---

另外：您可以使用

rect（）

s替换行操作，如果您将它们缓存到屏幕外画布，则可以将其“blit”到主画布，而不是每次都清除并重新绘制，这会提高性能。

到底是什么问题？它们不会反弹吗？或者它们根本不动？看起来它们确实按预期反弹，但我希望它看起来像我从中心看“房间”。但是它看起来像是倾斜到左上角了。您的坐标系相对于左上角，而不是中心和2。你所有的位置都在正八分之一-你从不为x和y选择负值。