# How to animate rotation of an object about an external axis

I’ve pulled together a TS function that enables rotating an object (cube) about an axis that is external to the object. I now want to animate this rotation.

I’ve tried using a Tween, and I can animate the rotation about its the cube’s own center-point, but I can’t figure out how to get it around another axis. In the non-animated rotation, I

Can anyone help me figure out how to animate this rotation?

Non-animated rotation (works):

``````const quaternion = new Quaternion();

function rotate(
cube: Object3D,
point: Vector3, // new Vector3(0, 0, 0)
axis: Vector3, // e.g. new Vector3(1, 0,0 ) for x-axis
angle: number,
) {

quaternion.setFromAxisAngle(axis, angle);
cube.applyQuaternion(quaternion);
cube.position.sub(point);
cube.position.applyQuaternion(quaternion);
}
``````

Attempt to animate rotation (doesn’t work – it spins on own axis). How do I incorporate the point vector?

``````const clock = new Clock()
const quaternion = new Quaternion();

function rotateSmooth(
cube: Object3D,
point: Vector3, // new Vector3(0, 0, 0)
axis: Vector3, // e.g. new Vector3(1, 0,0 ) for x-axis
angle: number,
) {

quaternion.setFromAxisAngle(axis, angle);

const animate: FrameRequestCallback = (time) => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
if ( ! cube.quaternion.equals(quaternion) ) {
const step = 200 * delta;
cube.quaternion.rotateTowards(quaternion, step);
}
}
requestAnimationFrame(animate);
}
``````

This is just a very general hint. Instead of:

``````the-big-angle-rotation
{
the-animation-loop
}
``````

you could try the opposite:

``````the-animation-loop
{
the-small-angle-rotation
}``````