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

Question

我正在研究在3D空间中弹跳的球体的HTML5 Canvas演示。这很简单。每个球都有X，Y和Z坐标。然后将这些坐标转换为我在此阅读的屏幕X和Y坐标。 http://answers.google.com/answers/threadview/id/496030.html

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

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

我在这里用jsFiddle演示了工作代码。 http://jsfiddle.net/xeMpv/

但有些事情在这里。 The result I get looks like this。你能告诉我我做错了吗？

Answer 1

目前您的原点（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。
• viewDistance翻译z个值。
• px和py是投影的2D坐标。

如果你的所有坐标都是正的，它们将被绘制在原点的右侧/底部，所以你需要使用负值在它的左侧/顶部有一些东西。

此外：您可以使用rect()替换行操作，如果将它们缓存到屏幕外的画布，您可以＆＃34; blit＆＃34;这是主画布，而不是每次清理和重新绘制，这会给你带来更好的表现。