How to center a THREE.Group based on the width of its children?

Question

I am using Three.js (r86) to render a group of spheres. I'm doing this by calling a createSphereGroup function from an external library:

// External library code.
function createSphereGroup(sphereCount) [
  var group = new THREE.Group();
  for (var i = 0; i < 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;
}

(Assume that the external library is opaque and I can't modify any code in it.)

// My code.
var group = createSphereGroup(5);
scene.add(group);

...which looks like this:

Screenshot

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 (x=0).

So is there some way that I can center the group? Maybe by computing the width of the group and then positioning it at x=-width/2? I know you can call computeBoundingBox on a geometry to determine its width, but a THREE.Group doesn't have a geometry, so I'm not sure how to do this...

WestLangley · Accepted Answer · 2018-04-25T14:14:21.303

24

If you want to center an object (or group) and its children, you can do so by setting the object's position like so:

new THREE.Box3().setFromObject( object ).getCenter( object.position ).multiplyScalar( - 1 );

scene.add( object );

three.js r.92

edited Apr 25 '18 at 14:14

answered Sep 11 '17 at 22:50

WestLangley

102,557
10
276
276

1

Good! Saw it too late haha. However, better call it only once as it will expand the box vertex per vertex. – neeh Sep 11 '17 at 22:57
You don't need the `var box` for your answer, it works (magically) without that part – Ferrybig Apr 25 '18 at 13:02
1

@Ferrybig Right -- not when written as a one-liner. – WestLangley Apr 25 '18 at 14:17
If the object was transformed by bones,this method will be useless. – Fei Sun Apr 06 '21 at 09:08
1

This function is a lifesaver – Anurag Srivastava Jul 10 '22 at 08:39
Can someone explain to me what this does? I don't see any setter being called for the object and still it is translated magically – Rico Ocepek Jun 19 '23 at 20:32
@RicoOcepek See https://stackoverflow.com/a/28860849/1461008. – WestLangley Jun 20 '23 at 01:37

neeh · Answer 2 · 2017-09-11T22:54:47.480

If all the objects in the group are rather the same size, as in your example, you can just take the average of the children's position :

function computeGroupCenter(count) {
    var center = new THREE.Vector3();
    var children = group.children;
    var count = children.length;
    for (var i = 0; i < count; i++) {
        center.add(children[i].position);
    }
    center.divideScalar(count);
    return center;
}

Another (more robust) way to do this is to create a bounding box containing the bounding boxes of every child of the group.

There are some important things to consider :

A THREE.Group can contain others THREE.Group, therefore, the algorithm should be recursive
Bounding boxes are computed in local space, however, the object may be translated with respect to its parent so we need to work in world space.
The group itself might be translated to! So we have to jump back from world space to the group's local space to have the center defined in the group's space.

You can achieve this easily with THREE.Object3D.traverse, THREE.BufferGeometry.computeBoundingBox and THREE.Box3.ApplyMatrix4 :

/**
 * Compute the center of a THREE.Group by creating a bounding box
 * containing every children's bounding box.
 * @param {THREE.Group} group - the input group
 * @param {THREE.Vector3=} optionalTarget - an optional output point
 * @return {THREE.Vector3} the center of the group
 */
var computeGroupCenter = (function () {
    var childBox = new THREE.Box3();
    var groupBox = new THREE.Box3();
    var invMatrixWorld = new THREE.Matrix4();

    return function (group, optionalTarget) {
        if (!optionalTarget) optionalTarget = new THREE.Vector3();

        group.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
                if (!child.geometry.boundingBox) {
                    child.geometry.computeBoundingBox();
                    childBox.copy(child.geometry.boundingBox);
                    child.updateMatrixWorld(true);
                    childBox.applyMatrix4(child.matrixWorld);
                    groupBox.min.min(childBox.min);
                    groupBox.max.max(childBox.max);
                }
            }
        });

        // All computations are in world space
        // But the group might not be in world space
        group.matrixWorld.getInverse(invMatrixWorld);
        groupBox.applyMatrix4(invMatrixWorld);

        groupBox.getCenter(optionalTarget);
        return optionalTarget;
    }
})();

Here's a fiddle.

This does not work for all groups. For example with the model used in this example: https://github.com/mrdoob/three.js/blob/dev/examples/webgl_loader_collada_skinning.html. This is related to https://stackoverflow.com/questions/50173778/three-js-draw-bounding-box-around-skinnedmesh — blockwork, May 04 '18 at 12:58

How to center a THREE.Group based on the width of its children?

2 Answers2