三.js ellipse.setRotationFromAxisAngle 消除了现有的四元数

问题描述

我目前正在开发一个 Three.js 项目。

其中一项任务是围绕局部x轴和z轴为rx和rz旋转椭圆强>度；然后沿全局轴 (0,1,0) 旋转 ry 度。我的代码是这样的：

    function createOrbit(ax,xRadius,yRadius,rx,ry,rz){
    const curve = new THREE.EllipseCurve(
        ax,// ax,aY
        xRadius,// xRadius,yRadius
        0,2 * Math.PI,// aStartAngle,aEndAngle
        false,// aClockwise
        0                // aRotation
    );
    const points = curve.getPoints( 50 );
    const geometry = new THREE.BufferGeometry().setFromPoints( points );
    const material = new THREE.LineBasicMaterial( { color : 0xffff00 } );
    // Create the final object to add to the scene
    const ellipse = new THREE.Line( geometry,material );
    ellipse.rotation.x += rx;
    ellipse.rotation.z += rz;
    yax = new THREE.Vector3(0,0);
    ellipse.setRotationFromAxisAngle(yax,ry);

    return ellipse;
}

然而，我发现函数ellipse.setRotationFromAxisAngle(yax,ry)会消除现有的并重新引入一组由

引入的新四元数

    ellipse.rotation.x += rx;
    ellipse.rotation.z += rz;

有什么建议可以解决这个问题吗？

解决方法

是的，发生这种情况是因为任何名为 .set() 的方法自然会覆盖之前的状态。您需要做的是访问 Quaternion（这是一个计算所有旋转的数学对象）并将其乘以一个新的：

ellipse.rotation.x += rx;
ellipse.rotation.z += rz;

// Create new rotation object
const yQuaternion = new THREE.Quaternion();
yQuaternion.setFromAxisAngle(yax,ry);

// Multiply the ellipse's rotation with the y-axis rotation
ellipse.quaternion.multiply(yQuaternion);

您可以在此处阅读有关四元数的更多信息：https://threejs.org/docs/#api/en/math/Quaternion

rotation three.js