title: How can I rotate around the center of a group in Three.js
body: <p>I've created a group of cubes and I'm trying to figure out how to set the center so I can rotate them.</p>
  
  <p>Here is the fiddle: <a href="https://jsfiddle.net/of1vfhzz/" rel="noreferrer">https://jsfiddle.net/of1vfhzz/</a></p>
  
  <p>Here I add the cubes:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>Then in <em>render scene</em> I rotate it around the y-axis, but I need to set the center. I tried <code>translate</code>, but I'm not getting it.</p>