Three.js: rotation in the center of the object

Question

I modified this single rotating cube so that it contains 3 cubes in Object3D

http://jsfiddle.net/VsWb9/1243/

In the above example, it uses the first cube. I need it to rotate on the same axis in the exact center of the object.

Code object3D

geometry = new THREE.CubeGeometry(50, 50, 50); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Object3D(); mesh1 = new THREE.Mesh(geometry, material); mesh1.position.x = 50; mesh2 = new THREE.Mesh(geometry, material); mesh2.position.x = 100; mesh3 = new THREE.Mesh(geometry, material); mesh.add(mesh1); mesh.add(mesh2); mesh.add(mesh3); scene.add(mesh); 

Here is the twist

  mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; 

EDIT: just to say this is an example of a problem demonstration, my actual code object contains many different sizes.

Answer 1

You can determine the coordinates of the center.

 mesh.position.set( center.x, center.y, center.z ); mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( -center.x, -center.y, -center.z ) ); 

Answer 2

The easiest way is to just put your cubes a little differently, so instead of setting

 mesh1.position.x = 50; mesh2.position.x = 100; 

and leaving mesh3 the default for x from 0, you can set them like this:

 mesh1.position.x = -50; mesh3.position.x = 50; 

This will make the center box also in the center of the stage.

jsFiddle showing that it works.