Skip to content

Rubik's Cube

Description

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 JEasings library.

Working Example

<>
Rubik's Cube (Working Example) sbedit.net
Object3D threejs.org
JEasings sbcode.net

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout rubiksCube
npm install
npm start

Comments