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?

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 th…

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 attachin…

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. f…

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 - CodeS…

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

[image] 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 which is good for changing an objects parent while keeping its world transform. Impossible Rubik’s Cube : Impossi…

Animate rotateOnWorldAxis

Questions

PavelBoytchev October 14, 2023, 7:10am 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

Rotation causes shift in position when object is assymetric around origin

Cube Puzzle: A 3D browser game built with Three.js

Topic		Replies	Views
React Three Fiber (iteration animation) Questions animation	3	400	June 17, 2023
Rotate object with its own local axis Questions rotation , react-three-fiber	7	8826	March 19, 2023
Three.js rotation problem 3d cube Questions transform	0	441	May 10, 2021
How to animate rotation of an object about an external axis Questions animation , rotation	1	444	October 12, 2023
Cube Puzzle: A 3D browser game built with Three.js Showcase geometry , lighting , animation , game , cube	4	117	October 2, 2026

Animate rotateOnWorldAxis

Related topics