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

Question

尝试围绕任何轴旋转对象.

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

问题似乎是定义轴.下面的单位矢量导致轴保留在对象的原点(中心)上,因此与标准旋转相同:

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

请参阅代码示例:JSFiddle

编辑:寻找一种可以绕枢轴旋转而不使用嵌套子项的方法.旋转孩子的父母提供了一种操纵孩子枢轴点的简单方法,但修改枢轴点是不可行的.

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

请参阅代码示例:JSFiddle with pivotots

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