javascript - 我将 XYZ 坐标转换为屏幕 XY 坐标有什么问题？

Question

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

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

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

我在这里展示了 jsFiddle 中的工作代码。http://jsfiddle.net/xeMpv/

但这里有些不对劲。我得到的结果是这样的。你能告诉我我做错了什么吗？

score 3 · Accepted Answer

目前您的原点 (origo) 位于左上角。投影x，y以便您的原点，或此处：笛卡尔坐标[0, 0, 0]位于屏幕中心：

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

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

此外：您可以用 s 替换行操作，rect()如果将它们缓存到屏幕外画布，您可以将其“blit”到主画布，而不是每次都清除和重新绘制，这会给您带来更好的性能。

1 回答 1