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