Three.js 使用轴角方法的相机旋转答案

【问题标题】：Three.js Camera Rotation using axis angle methodThree.js 使用轴角方法的相机旋转
【发布时间】：2015-08-07 14:01:43
【问题描述】：

我正在尝试编写一个控件，允许用户使用左/右箭头围绕 X 轴旋转和上/下箭头围绕 Y 轴旋转来旋转对象。（我知道一旦我开始旋转，物体内部坐标系将与世界坐标系不匹配）。

我可以按如下方式围绕 Y 轴旋转我的对象：

    var axis = new THREE.Vector3(0,1,0);
    aMatrix.makeRotationAxis( axis.normalize(), incr );
    obj.rotation.setFromRotationMatrix( aMatrix );

incr 是旋转的量。

我可以按如下方式围绕 X 轴旋转我的对象：

    var axis = new THREE.Vector3(1,0,0);
    aMatrix.makeRotationAxis( axis.normalize(), incr );
    obj.rotation.setFromRotationMatrix( aMatrix );

两者都工作正常。但是，当我从一个到另一个（旋转 X，然后旋转 Y）时，另一个轴会弹回零位置。因此，如果我围绕 X 旋转 45 度，然后开始围绕 Y 旋转，我的 X 旋转会回到零。

我正在设置：

        obj.useQuaternion = true;

在所有情况下。

我做错了什么？

r69

【问题讨论】：

(1) 你想做什么？ (2) 你用的是哪个版本的three.js？ (3) 试试object.rotateY( radians )。
更新了 (1) 和 (2) 的问题。我确实尝试了rotateY、rotateX，但是（a）我得到了万向节锁定，并且（b）我不清楚与欧拉顺序的交互。我正在尝试绘制旋转轴，并且使用四元数使轴有意义（Y 旋转围绕 Y 轴旋转，X 旋转围绕 X 轴旋转，但是使用欧拉旋转我没有得到那个结果。跨度>
(1) useQuaternion 不是 Object3D 的属性。 (2) 我只能回答有关当前版本的three.js 的问题。无论如何，我建议你更新。 (3) 你是想绕 Y 轴和 X 轴旋转 - 还是物体的内轴？
(2) 好的，我会升级。 (3) 我试图围绕对象的内轴旋转。想象一艘宇宙飞船，左/右键通过发射推进器等使飞船围绕飞船的内部 X 轴旋转（实际上不是我在做的，而是一个很好的 enuf 模型）。
见jsfiddle.net/r4wzk2mt/1。

标签： three.js

【解决方案1】：

使用 Matrix.makeRotationAxis 创建的旋转矩阵仅存储围绕该轴的旋转。要绕两个轴旋转，您需要创建两个矩阵（每个轴一个）并将它们相乘。

所以：

matrixXY = new THREE.Matrix4();

matrixX.makeRotationAxis(axisX, angleX);
matrixY.makeRotationAxis(axisY, angleY);
matrixXY.multiplyMatrices(matrixX, matrixY);

obj.rotation.setFromRotationMatrix(matrixXY);

在使用旋转时有很多选项，因此对于您的用例可能会有更简单的方法。

【讨论】：