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

**URL:** <https://discourse.threejs.org/t/how-to-animate-rotation-of-an-object-about-an-external-axis/56956>\
**Category:** Questions\
**Tags:** rotation, animation\
**Created:** [October 12, 2023, 8:07pm UTC](https://discourse.threejs.org/t/how-to-animate-rotation-of-an-object-about-an-external-axis/56956 "2023-10-12T20:07:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mhfaust](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mhfaust/32/40895_2.png) [@mhfaust](https://discourse.threejs.org/u/mhfaust)\
**Post date:** [October 12, 2023, 8:07pm UTC](https://discourse.threejs.org/t/how-to-animate-rotation-of-an-object-about-an-external-axis/56956/1 "2023-10-12T20:07:44Z")

</div>

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

```javascript
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?

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

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [October 12, 2023, 8:43pm UTC](https://discourse.threejs.org/t/how-to-animate-rotation-of-an-object-about-an-external-axis/56956/2 "2023-10-12T20:43:37Z")

</div>

This is just a very general hint. Instead of:

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

```

you could try the opposite:

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