4

我尝试torus沿 2 个轴旋转 a：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';

4

1 回答 1

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固定，然后你改变了）。请记住，旋转是串行应用的。

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

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

于 2016-10-11T18:20:38.517 回答