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

IT技术 javascript 3d three.js
2021-01-21 10:12:40

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

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

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

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

查看代码示例:JSFiddle

编辑:寻找一种可以在不使用嵌套子项的情况下围绕枢轴旋转的方法。旋转子级的父级提供了一种简单的方法来操作子级的轴心点,但修改轴心点是不可行的。

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

请参阅代码示例:带有枢轴的 JSFiddle

1个回答

如果要绕世界空间中的任意一条线旋转对象,可以使用以下方法。该线由 3Dpoint和方向向量 ( 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;

    }

}();

三.js r.85

谢谢你。优秀的解决方案。概念证明:jsfiddle.net/b4wqxkjn/7
2021-04-06 10:12:40