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轮换不是这样。

我通过调用以下函数为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

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

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

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

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

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

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

1 个答案: