Three.js: Adding and Removing Children of Rotated Objects

Question

I\'m trying to simulate a rubik\'s cube. I wanted to choose a face at random and rotate it. So I\'ve created 27 cube meshes and positioned them. You can see the working (err

Answer 1

The trick is to make use of THREE.Object3D.attach().

You need to begin with all your 27 cubes as a child of the scene.

Let pivot be an Object3D().

Let active be an array containing the 9 cubes you want to rotate. Now make the cubes a child of the pivot:

pivot.rotation.set( 0, 0, 0 );
pivot.updateMatrixWorld();

for ( var i in active ) {

    pivot.attach( active[ i ] );

}

Then, after the rotation, put the cubes back as children of the scene.

pivot.updateMatrixWorld();

for ( var i in active ) {

    scene.attach( active[ i ] );

}

three.js r.115