three.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, 0,              // ax, aY
        xRadius, yRadius,         // 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,1,0);
    ellipse.setRotationFromAxisAngle(yax, ry);

    return ellipse;
}

但是，我发现函数

ellipse.setRotationFromAxisAngle（yax，ry）

将消除现有的四分之一，并重新引入

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

---

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

是的，这是因为任何名为

.set（）

的方法都会自然而然地覆盖以前的状态。您需要做的是访问

四元数

（这是一个计算所有旋转的数学对象）并将其乘以一个新的四元数：

椭圆旋转.x+=rx；
椭圆旋转z+=rz；
//创建新的旋转对象
常数yQuaternion=新的三个四元数（）；
yQuaternion.setFromAxisAngle（yax，ry）；
//将椭圆的旋转与y轴旋转相乘
椭圆。四元数。乘法（Y四元数）；

---

您可以在此处阅读有关四元数的更多信息：

three.js提供了您需要的所有

Object3D

方法：

rotateOnAxis（）

，

rotateOnWorldAxis（）

，

rotateX（）

，等等。感谢您的建议！这很有效。四元数这个东西经常被我忽略。