Skip to content

Rubik's Cube


Before a face is rotated, the cubelets are attached to a group used for rotation along an axis. After the rotation has completed, the cubelets are then attached back to the main cube group.

When changing an object from one group to another, you can use the Object3D.add() method, however the local transforms of the object being added to the new group will be added to the existing transforms of the new group. This can change the world position, rotation and scale to something you don't expect. See Object3D Hierarchy for more information.

To attach an object to a group, but match the objects existing world transforms, you can use the Object3D.attach method. The attach method is used in the example.

Also, the smooth rotation transition is performed using the Tween.js library.

Working Example

Rubik's Cube (Working Example)

GitHub Branch

git clone
cd React-Three-Fiber-Boilerplate
git checkout rubiksCube
npm install
npm start