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

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

• javascript
• 3d
• three.js

• No, they are not the same; – WestLangley Commented Aug 12, 2015 at 0: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 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 Commented Aug 12, 2015 at 5:55
• 1 Here is an example that uses a pivot: jsfiddle.net/t83pzoj2 – WestLangley Commented Aug 12, 2015 at 6:03

1 Answer 1

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