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

Question

尝试围绕任意轴旋转 object。

例如门铰链（在 object 的边缘）或围绕太阳的行星（在 object 之外）。

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

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

参见代码示例：JSFiddle

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

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

参见代码示例：JSFiddle with pivots

Answer 1

如果你想在世界space中围绕任意一条线旋转一个物体，你可以使用下面的方法。该线由 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

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

Rotate object on specific axis anywhere in Three.js - including outside of mesh

javascript

3d

three.js