title: How to center a THREE.Group based on the width of its children?
body: <p>I am using Three.js (r86) to render a group of spheres. I'm doing this by calling a <code>createSphereGroup</code> function from an external library:</p>
  
  <pre><code>// External library code.
  function createSphereGroup(sphereCount) [
    var group = new THREE.Group();
    for (var i = 0; i &lt; sphereCount; i++) {
      var geometry = new THREE.SphereGeometry(50);
      var material = new THREE.MeshPhongMaterial({ color: 0xFF0000 });
      var sphere = new THREE.Mesh(geometry, material);
      sphere.position.x = i * 150;
      group.add(sphere);
    }
    return group;
  }
  </code></pre>
  
  <p><em>(Assume that the external library is opaque and I can't modify any code in it.)</em></p>
  
  <hr>
  
  <pre><code>// My code.
  var group = createSphereGroup(5);
  scene.add(group);
  </code></pre>
  
  <p>...which looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/rJEFBm.png" alt="Screenshot"></p>
  
  <p>As you can see, the group of spheres is off-center. I would like the group to be centered, with the 3rd sphere to be at the point where the two lines intersect (<code>x=0</code>).</p>
  
  <p>So is there some way that I can center the group? Maybe by computing the width of the group and then positioning it at <code>x=-width/2</code>? I know you can call <code>computeBoundingBox</code> on a geometry to determine its width, but a <code>THREE.Group</code> doesn't have a geometry, so I'm not sure how to do this...</p>