三个 JS 中的欧拉角与简单框网格

编程问答 2022-04-22

问题描述

我在全局轴系 XYZ 中有一个盒子，我想旋转到一个新的轴系 X'Y'Z'

新轴的向量是：

X' = (0,1,0)
Y' = (1,0)
Z' = (0,-1)

这意味着我知道旋转矩阵：

0,0
1,0
0,-1

我需要像这样将盒子网格旋转到新位置：

enter image description here

我尝试通过应用欧拉角来旋转盒子，但旋转不起作用，当我执行以下操作时似乎没有应用旋转：

let Box = new Three.BoxGeometry(w,h,thickness);
const material = new Three.MeshBasicMaterial({...});
const mesh_Box = new Three.Mesh(Box,material);
mesh_Box.rotation.x = -Math.PI/2;
mesh_Box.rotation.y = 0;
mesh_Box.rotation.z = Math.PI;

我在本文档的第 2.1 章（第 4 页）中使用 asin 和 atan2 公式计算了欧拉角：https://www.geometrictools.com/Documentation/EulerAngles.pdf

而且这些角度似乎是正确的，如果我将它们应用于 alfa = x、beta = y 和 gamma = z，那么根据维基百科上欧拉角的定义，我应该得到我想要的旋转：

enter image description here

我可能误解了什么，有什么想法吗？

编辑：

一些额外的例子，你可以看到我的期望和我得到的：

enter image description here

编辑 2：

现在我明白 alfa/beta/gamma 旋转只是围绕 X/Y/Z 轴（和顺序很重要）

在我上面的例子中，我现在明白对于给定的旋转角度，实际结果是正确的（我的预期当然是错误的）

但后来我的问题变成了这样：我有新轴的向量，所以我知道旋转矩阵，我可以使用我上面链接的 pdf 计算 3 个角度（及其相应的顺序）：

alfa = -1.57
beta = 0
gamma = 3.14

我现在如何为 X/Y/Z 轴使用哪个角度？

解决方法

（在下面回答我自己的问题，不是很有用，只是添加它以关闭帖子）

我的错误与three.js无关，在测试过程中我使用了来自excel的硬编码角度值，结果与javascript相比，excel中的BOOGTAN2（= ATAN2）切换了x/y参数:(这就是为什么轮换不做我想做的事，但至少问题为我解决了

in Javascript:
Math.atan2(90,15); // 1.4056476493802699
Math.atan2(15,90); // 0.16514867741462683

in excel:
ATAN2(90,15) = 0.16514867741462683
ATAN2(15,90) = 1.4056476493802699
euler-anglesjavascriptthree.js