Three.js - 环面不围绕 0z 轴旋转

Question

我尝试torus沿 2 个轴旋转：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，即两次旋转的顺序（围绕X和Y轴）。解决方案是设置torus.rotation.order = 'ZXY';

Answer 1

我制作了一个小提琴，证明所有三个mesh.rotation组件都工作正常。根据三个源代码中的内容，当您设置 Object3D（以及网格）的旋转时，会发生以下情况：

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 );call。
4. 该变换应用于对象父级的变换以获取用于绘图的object.matrixWorld。

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

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

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