javascript – Three.js – Torus不绕0z轴旋转

2019年7月28日 237次阅读

我尝试沿2轴旋转圆环：牛和奥兹.我想用鼠标修改的滑块dat.gui应用此旋转.

我通过以下方式定义了圆环：

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轴旋转不是这种情况.

我通过调用以下函数为torus进行旋转：

// 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：

我找到了解决方案,因为我没有考虑欧拉角,即2次旋转的顺序(围绕X轴和Y轴).解决方法是设置torus.rotation.order =’ZXY’;

最佳答案 我做了一个
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).请记住,旋转是串联应用的.

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

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

点赞