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

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
– sq2, Commented Aug 12, 2015 at 5: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
– WestLangley, Commented Aug 12, 2015 at 5:55

WestLangley · Accepted Answer · 2017-05-31 15:02:59Z

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, 2017 at 15:02

answered Aug 16, 2015 at 18:02

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sq2 Over a year ago

Thank you. Excellent solution. Proof of concept: jsfiddle.net/b4wqxkjn/7

bennlich Over a year ago

Why do you need to apply the quaternion twice? Based on explanations like 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 Over a year ago

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)?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related