如何根据子女的宽度来集中一个THREE.Group？

Question

我使用Three.js(r86)渲染一组球体.我这样做是通过createSphereGroup从外部库调用一个函数:

// 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;
}

(假设外部库是不透明的,我无法修改其中的任何代码.)

---

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

......看起来像这样:

如你所见,这组球体偏离中心.我希望该组居中,第三个球体位于两条线相交的点(x=0).

那么我可以通过某种方式使这个群体居中吗？也许通过计算组的宽度然后将其定位在x=-width/2？我知道你可以调用computeBoundingBox几何来确定它的宽度,但是THREE.Group没有几何形状,所以我不知道怎么做...

Answer 1

如果要将对象(或组)及其子对象居中,可以通过设置对象的位置来实现:

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

scene.add( object );

three.js r.92