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


i using three.js (r86) render group of spheres. i'm doing calling createspheregroup function external library:

// external library code. function createspheregroup(spherecount) [   var group = new three.group();   (var = 0; < 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 = * 150;     group.add(sphere);   }   return group; } 

(assume external library opaque , can't modify code in it.)


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

...which looks this:

screenshot

as can see, group of spheres off-center. group centered, 3rd sphere @ point 2 lines intersect (x=0).

so there way can center group? maybe computing width of group , positioning @ x=-width/2? know can call computeboundingbox on geometry determine width, three.group doesn't have geometry, i'm not sure how this...

if want center object (or group) , children, can setting object's position so:

var box = new three.box3().setfromobject( object ).getcenter( object.position ).multiplyscalar( - 1 );  scene.add( object ); 

three.js r.87


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -