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

Question

Trying to rotate an object around any axis.

For example like a door hinge (on edge of object) or planet around the sun (outside of object).

The problem seems to be defining the axis. The below unit vector results in axis remaining on object's origin (centre) therefor identical to standard rotation:

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

See code example: JSFiddle

EDIT: Looking for a way that one can rotate around a pivot without using nested children. Rotating a child's parent provides an easy way to manipulate the child's pivot point, but modifying the pivot point is not viable.

Example below, if you wanted to rotate the cube in a figure 8 motion, it would be achievable with this method by changing the parent. But one would have to assure that the new parent's position and orientation is precisely configured to make the child seamlessly jump between parents, and complex motions that do not repeat or loop would be very complicated. Instead, I would like to (and I will paraphrase the question title) rotate an object on a specific axis without using object nesting anywhere in the scene, including outside of the object's mesh.

See code example: JSFiddle with pivots

No, they are [not the same](https://jsfiddle.net/b4wqxkjn/3/); — WestLangley, Aug 12 '15 at 00:24
True @WestLangley, they are indeed not the same. But the problem still remains of how to specify an axis of rotation anywhere in a scene. — sq2, Aug 12 '15 at 05:48
There are several approaches to that problem, and the answer depends on your use case. Provide a fiddle that shows the problem you are trying to solve and ask a specific question. — WestLangley, Aug 12 '15 at 05:55
Here is an example that uses a pivot: http://jsfiddle.net/t83pzoj2/ — WestLangley, Aug 12 '15 at 06:03

WestLangley · Accepted Answer · 2017-05-31T15:02:59.003

21

If you want to rotate an object around an arbitrary line in world space, you can use the following method. The line is specified by a 3D point and a direction vector (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

edited May 31 '17 at 15:02

answered Aug 16 '15 at 18:02

WestLangley

102,557
10
276
276

1

Thank you. Excellent solution. Proof of concept: https://jsfiddle.net/b4wqxkjn/7/ – sq2 Aug 17 '15 at 11:18
Why do you need to apply the quaternion twice? Based on explanations like https://stackoverflow.com/a/5337219/1457005, I would expect to only need to apply the rotation once. I guess I don't understand the difference between `object.applyQuaternion` and `object.position.applyQuaternion`. – bennlich Dec 23 '22 at 18:11
Is it that `object.position.applyQuaternion` rotates the coordinates of the position (i.e. changes where in the world the object is), whereas `object.applyQuaternion` rotates the object about its own origin (i.e. changes the orientation of the object in the world)? – bennlich Dec 23 '22 at 18:22

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

1 Answers1

Linked