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

Question

我尝试沿 2 个轴旋转 torus：Ox 和 Oz。我想用鼠标修改的滑块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 旋转的情况并非如此。

我通过调用以下函数对圆环进行旋转：

// 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

我制作了一个fiddle，证明所有三个mesh.rotation 组件都可以正常工作。根据在THREE 源代码中可以找到的内容，当您设置 Object3D（以及分别为 Mesh）的旋转时会发生以下情况：

1. 在THREE.Object3D:quaternion.setFromEuler( rotation, false ); 发生。
2. 在THREE.Quaternion 和THREE.Euler（我们的mesh.rotation 组件是Euler angles）中，我们可以看到旋转取决于应用程序的顺序。 THREE.Euler 中的默认轮换顺序为 'XYZ'。
3. THREE 中的标准着色器程序将对象变换作为矩阵。在 THREE.Object3D 中，您可以看到 this.matrix.compose( this.position, this.quaternion, this.scale ); 调用。
4. 此变换应用于对象父级的变换以获得用于绘图的object.matrixWorld。

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

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

如果这没有帮助，请构建一个 minimal 示例来说明您的问题。