Three.js - Torus不绕0z轴旋转

Question

我尝试沿2轴旋转torus ：牛和奥兹。 我想用鼠标修改的滑块dat.gui应用此旋转。

我通过以下方式定义了torus ：

var geometryTorus = new THREE.TorusGeometry( radius, 2*widthLine, 100, 100 );
var materialLine = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
torus = new THREE.Mesh( geometryTorus, materialLine );
scene.add(torus);

我的问题是沿着Ox axis旋转工作正常但是沿着Oz axis旋转不是这种情况。

我通过调用以下函数为torus进行旋转：

// Change great circle parameters
function changeGreatCircle(thetax, thetaz) {

// Update rotation angles 
torus.rotation.x = thetax;
torus.rotation.z = thetaz; 

}

对于上面的函数，我调用render('init')函数来计算摄像机的位置。

如何沿Oz axis旋转此环面？ 为什么它沿着Ox axis而不是沿着Oz axis ？

如果有人能提供线索，那就没关系了。

谢谢

更新1：

我找到了解决方案，因为我没有考虑Euler angles ，即2次旋转的顺序（围绕X轴和Y轴）。 解决方法是设置torus.rotation.order = 'ZXY';

Answer 1

我做了一个小提琴 ，证明所有三个mesh.rotation组件都工作正常。 基于在三个源代码中可以找到的内容，当您设置Object3D（和Mesh）的旋转时，会出现以下情况：

1. 在THREE.Object3D中 ： quaternion.setFromEuler( rotation, false ); 发生。
2. 在THREE.Quaternion和THREE.Euler （我们的mesh.rotation组件是欧拉角 ）中，我们可以看到旋转依赖于应用的顺序。 THREE.Euler中的默认旋转顺序为'XYZ' 。
3. THREE中的标准着色器程序将对象变换作为矩阵。 在THREE.Object3D中你可以看到this.matrix.compose( this.position, this.quaternion, this.scale ); 呼叫。
4. 此变换应用于对象父变换以获取用于绘制的object.matrixWorld。

所以说到你的问题：你在不同的轴上对圆环和相机应用旋转，这就是为什么相机不跟随圆环（圆环没有相对于世界空间固定然后你改变torus.rotation.z ）。 请记住，旋转是串联应用的。

如果通过插入虚拟对象和调整旋转顺序无法实现所需的行为 - 您可以构建自己的材质并将更多参数作为制服传递以在着色器程序中使用。 在这种情况下，它不需要。

如果这没有帮助，请构建一个演示您的问题的最小示例。