0

我有许多用 HTML/CSS/JavaScript 呈现的对象。这些物体都位于一个半径为 R 的不可见球体的表面上。

此外，与用户的交互允许这个不可见的球体任意旋转。

显而易见的解决方案是分配给对象的球坐标（Theta、Phi 和固定半径），它是转换为笛卡尔 3D 坐标的，然后我可以只降低深度 (Z)，或者应用一些花哨的看法。我以后会担心透视...

由于我正在处理图形，X/Y 分别是水平/垂直，Z 是深度，+ve 伸出屏幕，-ve 位于显示器内部。

我有一个名为 的 JavaScript 对象数组objects[]，每个对象都有一个 Theta 和 Phi。我假设 Theta 是围绕 Y 轴旋转，而 Phi 是围绕 X 轴旋转，因此在 Phi = 0 和 Theta = 0 时，我们处于 (X,Y,Z) = (0,0,R);

由于我正在旋转不可见的球体，因此我不想更改每个单独对象的 Theta 和 Phi，这也只会增加数值的不稳定性。相反，我存储了与球体本身的旋转相关的全局 Theta 和 Phi。

因此，点的“有效” Theta 和 Phi 是点的 Theta 和 Phi 加上全局 Theta 和 Phi。

根据 Wikipedia、WolframAlpha、MathWorld 和许多其他资源，我们可以通过以下方式从球坐标中找到笛卡尔坐标：

z = r * sin(phi) * cos(theta);
y = r * sin(phi) * sin(theta);
x = r * cos(phi);

（当我向后使用它们时，我已经从维基百科交换了 Theta 和 Phi，而且我的 X/Y/Z 坐标也不同）。

我不知道为什么，但是当我渲染这些对象时，它们看起来根本不正确。如果您想象一个球体赤道上的一个点，Theta = Pi/4，并且您围绕 Y 轴旋转球体，则该点仅在投影到 2D 上且不使用透视变换时才应上下移动。然而，这根本不是发生的事情。这些点从屏幕的右侧移动到左侧。整个事情看起来都错了。

4

1 回答 1

2

Order matters. When you use your equations

z = r * sin(phi) * cos(theta);
y = r * sin(phi) * sin(theta);
x = r * cos(phi);

then you can interpret them as a rotation first by phi about y and second by theta about x (for appropriate choices of angle measurement directions):

(x1, y1, z1) = (r, 0, 0)
(x2, y2, z2) = (x1 * cos(phi) - z1 * sin(phi),
                y1,
                x1 * sin(phi) + z1 * cos(phi))
             = (r * cos(phi), 0, r * sin(phi))
(x3, y3, z3) = (x2,
                y2 * cos(-theta) - z2 * sin(-theta),
                y2 * sin(-theta) + z2 * cos(-theta))
             = (r * cos(phi),
                r * sin(phi) * sin(theta),
                r * sin(phi) * cos(theta))

When you simply add those angles, you end up with a wrong order: rotating first by phi1then by theta1 then by phi2 and then by theta2 about the different axes is not the same as rotating by phi1 + phi2 first and theta1 + theta2 afterwards. You're changing the order between theta1 and phi2, which breaks your 3D position.

Better use rotation matrices, quaternions, a library (like ) which encapsulates this for you, or make sure you properly combine euler angles.

于 2012-12-10T09:21:06.053 回答