javascript - 在 Three.js 中的任何地方的特定轴上旋转对象 - 包括网格外部

Question

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

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

问题似乎出在定义轴上。以下单位向量导致轴保持在对象的原点(中心)，因此与标准旋转相同:

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

参见代码示例:JSFiddle

编辑: 寻找一种无需使用嵌套子项即可围绕枢轴旋转的方法。旋转子项的父项提供了一种简单的方法来操纵子项的枢轴点，但修改枢轴点是不可行的。

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

参见代码示例:JSFiddle with pivots

Answer 1

如果你想在世界空间中围绕任意一条线旋转一个物体，你可以使用下面的方法。该线由 3D 点和方向矢量(轴)指定。

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