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

Question

我想让一个圆环沿着两个轴旋转：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 轴 旋转正常，但绕 Oz 轴 旋转不行。

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

// Change great circle parameters
function changeGreatCircle(thetax, thetaz) {

// Update rotation angles 
torus.rotation.x = thetax;
torus.rotation.z = thetaz; 

}

对于上面的函数，我调用render('init')函数，在其中计算摄像机的位置。

如何使这个圆环沿着Oz轴旋转？为什么它沿着Ox轴旋转而不是沿着Oz轴旋转？

如果有人能给出提示，那就太好了。

谢谢。

更新1：

我找到了解决方案，因为我没有考虑到Euler角度，即2次旋转（绕X和Y轴）的顺序。解决方案是设置torus.rotation.order = 'ZXY';。

- user1773603

---

这个链接有帮助吗？https://dev59.com/9Ggu5IYBdhLWcg3w0aGg - ThisIsSparta

我的理解如下。环面围绕其Z轴对称，该轴最初与“世界”（以及摄像机）的Z轴重合。在围绕其X轴旋转PI/2后，环面的Y轴现在与世界坐标系中的Z轴平行。这就是为什么在摄像机围绕Z轴旋转时，你必须围绕环面的Y轴旋转，以保持屏幕上的固定位置。 - ConnorsFan

ConnorsFan：谢谢你的帮助，我想我已经找出了问题所在，但我需要进行其他测试来确认。 - user1773603

@ConnorsFan：你能否删除一下你在评论中提供的 jsfiddle 链接，即 jsfiddle.net/ztu3bjuu/5。先谢谢了。 - user1773603

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时，圆环体相对于世界空间并没有固定）。请记住，旋转是按系列应用的。

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

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

- Ramil Kudashev

---

mlkn：谢谢你的回答。我想我可能已经找到了问题所在。我会提出另一个问题，以获得更多的细节并更好地理解这个潜在的解决方案。 - user1773603