在 Three.js 中的任意位置在特定轴上旋转对象 - 包括网格之外

Question

试图围绕任意轴旋转对象。

例如像门铰链（在物体边缘）或围绕太阳的行星（在物体外部）。

问题似乎在于定义轴。下面的单位向量导致轴保持在对象的原点（中心），因此与标准旋转相同：

object2.rotateOnAxis(new THREE.Vector3(1,0,0), 0.01);
// same as
object1.rotation.x += 0.01;

查看代码示例：JSFiddle

编辑： 寻找一种可以绕枢轴旋转而不使用嵌套子级的方式。旋转孩子的父母提供了一种简单的方法来操纵孩子的枢轴点，但修改枢轴点是不可行的。

下面的示例，如果您想以 8 字形运动旋转立方体，则可以通过更改父对象来实现此方法。但是必须确保新父母的位置和方向被精确配置，以使孩子在父母之间无缝跳跃，不重复或不循环的复杂动作将非常复杂。相反，我想（并且我将解释问题标题）在特定轴上旋转对象，而不使用场景中任何位置的对象嵌套，包括对象网格之外。

见代码示例：JSFiddle with pivots

Answer 1

如果要在世界空间中围绕任意一条线旋转对象，可以使用以下方法。线由 3D point 和方向矢量 (axis) 指定。

THREE.Object3D.prototype.rotateAroundWorldAxis = function() {

    // rotate object around axis in world space (the axis passes through point)
    // axis is assumed to be normalized
    // assumes object does not have a rotated parent

    var q = new THREE.Quaternion();

    return function rotateAroundWorldAxis( point, axis, angle ) {

        q.setFromAxisAngle( axis, angle );

        this.applyQuaternion( q );

        this.position.sub( point );
        this.position.applyQuaternion( q );
        this.position.add( point );

        return this;

    }

}();

three.js r.85