Three.js - 如何正确使用旋转矩阵？

Question

经过几天的研究，Three.js 的旋转矩阵没有像我预期的那样表现，我不知道我错过了什么。

我需要以三个方向单位向量的形式定义场景中每个对象的旋转，每个向量描述一个局部轴的方向。在this thread 之后，我创建了一个带有两个轴的简单场景。我正在对第二个应用旋转，而第一个（在中心）显示全局坐标。可以看到现场here。

在我的例子中，对象的默认方向向量如下。这些值表示对象没有应用旋转。

Axis x: (1,0,0)
Axis y: (0,1,0)
Axis z: (0,0,1)

按照这个标准，我尝试将对象在 Y 轴上逆时针旋转 90º（这样 Z 轴最终指向当前 x 轴的方向）：

const rotationMatrix = new THREE.Matrix4();
rotationMatrix.set( 
  0  ,0  ,-1 ,0
 ,0  ,1  ,0  ,0
 ,1  ,0  ,0  ,0
 ,0  ,0  ,0  ,1
 );
axes.rotation.setFromRotationMatrix(rotationMatrix);

我遇到的第一个问题是旋转没有按照我预期的方向进行；在这种情况下，它是顺时针而不是逆时针。我可以在应用旋转矩阵后解决这个反转局部旋转的问题：

axes.rotation.x *= -1;
axes.rotation.y *= -1;
axes.rotation.z *= -1;

到目前为止，一切都很好，这适用于所有轴的旋转。尽管如此，可能存在在多个轴上旋转的对象。例如，我想不仅在 Y 轴上将这个对象旋转 90º，而且在（全局）Z 轴上旋转 90º。我期望的结果是一个对象，其局部 X 指向全局 -Z，局部 Y 指向全局 X，局部 Z 指向全局 -Y。

const rotationMatrix = new THREE.Matrix4();
rotationMatrix.set( 
 0  ,0  ,-1 ,0
,1  ,0  ,0  ,0
,0  ,-1 ,0  ,0
,0  ,0  ,0  ,1
);
axes.rotation.setFromRotationMatrix(rotationMatrix);
axes.rotation.x *= -1;
axes.rotation.y *= -1;
axes.rotation.z *= -1;

但是this 是我得到的。关于旋转矩阵，我错过了什么吗？ 提前谢谢！

Answer 1

在那个方向进行更深入的研究（在数学家朋友的帮助下）我发现我拥有的向量形成了 4x4 方向矩阵，它是 4x4 旋转矩阵的逆矩阵。调用Matrix4.getInverse 是使用方向向量定义旋转的解决方案。

const x = transform[xAxis];
const y = transform[yAxis];
const z = transform[zAxis];
const directionMatrix = new THREE.Matrix4();
const rotationMatrix = new THREE.Matrix4();
directionMatrix.set( 
 x[0] ,x[1] ,x[2] ,0
,y[0] ,y[1] ,y[2] ,0
,z[0] ,z[1] ,z[2] ,0
,0    ,0    ,0    ,1
);

rotationMatrix.getInverse(directionMatrix);
return rotationMatrix;

这也发布在 Three.js 论坛上。