How to animate rotation of an object about an external axis

Questions
,
1

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);
    cube.position.add(point);
}

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);
}
2

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
}