Three.js

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

Answer 1

我已经制作了一个 fiddle that demonstrates that all three mesh.rotation components work fine. Based on what could be found in THREE 源代码，当您设置 Object3D（以及相应的网格）的旋转时会发生以下事情：

在 THREE.Object3D 中：quaternion.setFromEuler( rotation, false ); 发生。
在 THREE.Quaternion and THREE.Euler (our mesh.rotation components are Euler angles) 中我们可以看到旋转取决于应用程序的顺序。 THREE.Euler 中的默认旋转顺序是 'XYZ'.
三中的标准着色器程序以对象变换为矩阵。在 THREE.Object3D 中，您可以看到 this.matrix.compose( this.position, this.quaternion, this.scale ); 调用。
此转换应用于对象父对象的转换以获得用于绘图的 object.matrixWorld。

所以说到你的问题：你在不同轴上对环面和相机应用旋转，这就是相机不跟随环面的原因（并且环面不是相对于世界 space 然后你改变 torus.rotation.z)。请记住，旋转是按顺序应用的。

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

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

Three.js - Torus 没有绕 0z 轴旋转

Three.js - Torus is not rotating around 0z axis

javascript

rotation

dat.gui