Three.js: adding and removing children with rotating objects

Question

I am trying to simulate a rubik cube. I wanted to pick a face randomly and rotate it. So I created 27 cubic grids and positioned them. You can see the working (unstable) rubik cube here http://codepen.io/theonepa1/full/fzAli

What is the problem.

As the link above shows, smaller cubes at the edges move randomly (at least not in the way I expect)

What I've done.

When I tried to rotate the face, I grouped 9 cubes belonging to the face, adding them as children of the new Object3D. Then I rotated the 3d object along its axis using object3d.rotate.x (or y or z).

What i debugged

I made sure that the cubes that I choose for the second face rotation are correct. After completing the first turn of the face, I update their virtual positions (not the actual coordinates). Therefore, for the second face rotation, I checked that the cubes were selected correctly.

What is really going on

One remark I made is that the axis of the cubes (the smaller ones) change after the 3D object (the parent one containing 9 face cubes) rotates. And also the coordinates of the cubes are not updated automatically after turning the face. Say, for example, if one of the cubes has (0,0,22) as rotation in the face, the coordinates are the same even after the rotation. However, the orientation of the axes of the cube changes.

What is the best way to rotate a group of objects around an axis? Is Object3D used correctly? Are we supposed to remove children from one parent before adding them to another group for a second face rotation?

Do I have to do some updating on separate cubes before adding them to the second group for a second face rotation?

I read several posts about the application of MatrixWorld, but I really could not understand what was its effect on the orientation of the axes and the coordinate of the cube?

Can you tell me where I can read about concepts such as applyMatrixWorld, is this some kind of general concept in normal 3d programming?

This is a very long question. I would really appreciate your reply :)

Answer 1

The trick is to use THREE.SceneUtils.attach() and THREE.SceneUtils.detach() .

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

Let pivot be Object3D() .

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

 pivot.rotation.set( 0, 0, 0 ); pivot.updateMatrixWorld(); for ( var i in active ) { THREE.SceneUtils.attach( active[ i ], scene, pivot ); } 

Then, after rotation, return the cubes as children of the scene .

 pivot.updateMatrixWorld(); for ( var i in active ) { cubes[ i ].updateMatrixWorld(); // if not done by the renderer THREE.SceneUtils.detach( active[ i ], pivot, scene ); } 

Read the source of SceneUtils.js for you to understand what is going on.

three.js r.63