Animate rotateOnWorldAxis

Questions
, ,
1

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?

2

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

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

2 Likes
3

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.

1 Like
4

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.

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)
}
5

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

image

5 Likes
6

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 which is good for changing an objects parent while keeping its world transform.

Impossible Rubik’s Cube : Impossible Rubik's Cube - CodeSandbox
“Impossible” because it’s coloured wrong. I couldn’t figure out an elegant way to colour it correctly yet.

test

2 Likes
7

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

1 Like
8

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