How can I rotate around the center of a group in Three.js

Question

I've created a group of cubes and I'm trying to figure out how to set the center so I can rotate them.

Here is the fiddle: https://jsfiddle.net/of1vfhzz/

Here I add the cubes:

side1 = new THREE.Object3D();
addCube({ name: 'side1topleft', x: -8.5, y: 7.5, z: 5 });
addCube({ name: 'side1topmiddle', x: -4, y: 7.5, z: 5 });
addCube({ name: 'side1topright', x: .5, y: 7.5, z: 5 });
addCube({ name: 'side1middleleft', x: -8.5, y: 3, z: 5 });
addCube({ name: 'side1middlemiddle', x: -4, y: 3, z: 5 });
addCube({ name: 'side1middleright', x: .5, y: 3, z: 5 });
addCube({ name: 'side1bottomleft', x: -8.5, y: -1.5, z: 5 });
addCube({ name: 'side1bottommiddle', x: -4, y: -1.5, z: 5 });
addCube({ name: 'side1bottomright', x: .5, y: -1.5, z: 5 });
scene.add(side1);

function addCube(data) {
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = data.x
    cube.position.y = data.y
    cube.position.z = data.z
    cube.rotation.set(0, 0, 0);
    cube.name = data.name;
    side1.add(cube);
}

Then in render scene I rotate it around the y-axis, but I need to set the center. I tried translate, but I'm not getting it.

Answer 1

You want your group of meshes to rotate around the group center.

One option is to translate your mesh geometries so, as a collection, they are centered around the local origin.

If you don't want to do that, then you can create a grand-parent object pivot, and rotate that.

In your case, side1 is the parent of your child meshes. So use this pattern:

var pivot = new THREE.Group();
scene.add( pivot );

pivot.add( side1 );
side1.position.set( 4, - 3, - 5 ); // the negative of the group's center

In your animation loop, rotate the pivot;

pivot.rotation.z += 0.02;

fiddle: https://jsfiddle.net/of1vfhzz/1/

three.js r.77