# Animate rotateOnWorldAxis

**URL:** <https://discourse.threejs.org/t/animate-rotateonworldaxis/56994>\
**Category:** Questions\
**Tags:** rotation, animation, react-three-fiber\
**Created:** [October 13, 2023, 8:38pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994 "2023-10-13T20:38:16Z")\
**Posts on this page:** 8\
**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 13, 2023, 8:38pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/1 "2023-10-13T20:38:16Z")

</div>

I’m building a cube-solver app. I can rotate the layers of the cube, but I can’t figure out how to animate this rotation. Rotation along any of the x, y, and z axes is done very simply via `rotateOnWorldAxis`. How can I animate this?

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [October 13, 2023, 9:04pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/2 "2023-10-13T21:04:52Z")

</div>

I made this qube a while ago… I never got a proper solver working though… I only “solve” by rewinding all the moves 😛

IIRC i used a new THREE.Group() and .attach ed the slab to that group… animate the group… then when the animation was finished… .attach the slabs cubes back to the scene.

[https://vectorslave.com/qube/index.html](https://vectorslave.com/qube/index.html)

---

<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 13, 2023, 10:09pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/3 "2023-10-13T22:09:11Z")

</div>

If “cube-solver” is the Rubik’s cube, I will try tomorrow, if there is no solution by then. I have some idea and if it is correct, rotation of sides in any order should be rather straightforward.

**Edit** : I see, @manthrax already posted a solution. So, tomorrow I will try without grouping and attaching.

---

<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 13, 2023, 10:34pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/4 "2023-10-13T22:34:50Z")

</div>

This works, but it’s inelegant, does’t use animation frames, and lacks easing.

Also, I didn’t specify in my question, but I’m building an app with React, so I’m using react-three-fiber.  
I don’t expect answers to address the React context per se, but you’ll get bonus points if you do, I promise.

```javascript
function rotate(
        cube: Object3D, 
        axis: Vector3, 
        angle: number, 
    ) {
		const steps = 45
		const r = (i: number) => {
			setTimeout(() => {
				cube.rotateOnWorldAxis(axis, angle / steps)
				if(i < steps - 1){
					r(i + 1)
				}
			}, 3)
		}
		r(0)
}

```

---

<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 14, 2023, 7:10am UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/5 "2023-10-14T07:10:57Z")

</div>

Here it is without groups, with tween easing and using the animation loop. However, it does not use `rotateOnWorldAxis` (no need for it) and it is not react-three-fibered (I don’t do R3F), so, I guess, no bonus for me:

[https://codepen.io/boytchev/full/yLGrWPq](https://codepen.io/boytchev/full/yLGrWPq)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/3/c37db782df9db4cab7b136f66cf79adc1bc538f0.jpeg)](https://codepen.io/boytchev/full/yLGrWPq)

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 15, 2023, 4:54pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/6 "2023-10-15T16:54:56Z")

</div>

Another cube for the collection.  
Doesn’t use `rotateOnWorldAxis` either,  
However it is R3F, and uses Tween.js to animate the faces.  
It also uses [Object3D.attach](https://threejs.org/docs/#api/en/core/Object3D.attach) which is good for changing an objects parent while keeping its world transform.

Impossible Rubik’s Cube : [Impossible Rubik's Cube - CodeSandbox](https://codesandbox.io/s/impossible-rubiks-cube-gq5r46)  
“Impossible” because it’s coloured wrong. I couldn’t figure out an elegant way to colour it correctly yet.

![test](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/d/3da3fd931cdfb0acf3e5381293b8bf34f49fd706.gif)

---

<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 15, 2023, 9:03pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/7 "2023-10-15T21:03:54Z")

</div>

Very nice, Sean. Thank you!  
Also: I really appreciate your course. I got me started really fast wtih three-js.

---

<div class="post-metadata">

**Author:** ![ClaudioAshmore](https://avatars.discourse-cdn.com/v4/letter/c/b19c9b/32.png) [@ClaudioAshmore](https://discourse.threejs.org/u/ClaudioAshmore)\
**Post date:** [November 6, 2023, 2:56pm UTC](https://discourse.threejs.org/t/animate-rotateonworldaxis/56994/8 "2023-11-06T14:56:09Z")

</div>

> [@seanwasere](#):
>
> Another cube for the collection.  
> Doesn’t use `rotateOnWorldAxis` either,  
> However it is R3F, and uses Tween.js to animate the faces.  
> It also uses [Object3D.attach](https://threejs.org/docs/#api/en/core/Object3D.attach) which is good for changing an objects parent while keeping its world transform.
> 
> Impossible Rubik’s Cube : [Impossible Rubik’s Cube - CodeSandbox](https://codesandbox.io/s/impossible-rubiks-cube-gq5r46)  
> “Impossible” because it’s coloured wrong. I couldn’t figure out an elegant way to colour it correctly yet.
> 
> > ****
> >
> > To animate rotations using rotateOnWorldAxis in a cube-solver app, consider using the Three.js library. Create a scene, camera, and renderer, define your animation parameters, and interpolate the rotations within a render loop. Gradually update the rotations to achieve smooth and controlled animations. I actually want to [find more](https://www.grabmyessay.com/pay-for-research-paper) reviews for an online essay writers and for that I am searching for a site online where I can find all reviews at one platform. And when I was looking for it online, I found your post as well.
> 
> ![test](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/d/3da3fd931cdfb0acf3e5381293b8bf34f49fd706.gif)

Thanks, it helps me a lot. You made my day.