threejs recenter camera after loading objects - three.js

Question

after loading several gltf files, I am renaming these files and try to reposition the camera so that it is centered and looking at the centroid of the new objects and the whole scene fits within the camera.
But the centering does not always work, sometimes the centroid is calculated somewhere completely different. The following code is ran in render() only once after all objects have been loaded:
var all_centers = [];
scene.updateMatrixWorld();
scene.traverse(function(child){
if (child instanceof THREE.Mesh){
if (child.name.indexOf("_") !== -1){ // the newly imported objects
child.geometry.computeBoundingSphere();
var the_center = new THREE.Vector3();
child.getWorldPosition(the_center);
all_centers.push(the_center);
}
}
});
var the_centroid = getPointsCentroid(all_centers);
var cameraPosition = new THREE.Vector3(the_centroid.x,the_centroid.y,-55);
camera.position.copy(cameraPosition);
camera.lookAt(the_centroid);
and here is the function for the centroid:
function getPointsCentroid(points){
var centroid = [0.,0.,0.];
for(var i = 0; i < points.length; i++) {
var point = points[i];
centroid[0] += point.x;
centroid[1] += point.y;
centroid[2] += point.z;
}
centroid[0] /= points.length;
centroid[1] /= points.length;
centroid[2] /= points.length;
return new THREE.Vector3(centroid[0],centroid[1],centroid[2]);
}

Answer 1

For now ignoring the problem of getting the whole scene to fit within the camera (this is a common problem, I'm sure you can find useful information online (perhaps this?)).
Instead, let us focus on what seems to be your main question: You wish to find the center of a group of objects. What you are currently doing is you are computing an average of the object centers. This means that if you have one object to the far left, and 9 objects to the far right, your computed center point will also be far to the right. (This would be an approximation of the center of mass, assuming the objects are of similar mass.)
However, for the purpose of centering the camera so that every object is visible, you are not interested in the center of mass, but you wish to find a point such that the distance to the leftmost point is equal to the distance to the rightmost, and similarly the lowermost to the highermost, etc. Such a point can be found using the bounding box of all your objects. The center of this bounding box is the point you are looking for.
If your camera is to be aligned to the axes, you can easily compute such a bounding box for each object as follows:
new THREE.Box3().setFromObject(myMesh)
The bounding box of all the objects is simply the box represented by the lowest and highest coordinates of all the object bounding boxes you computed. The center of the complete bounding box will give you the point you are after.
Next, assuming the camera is aligned with the axes, the problem is simply finding a suitable distance from the camera to this point so that the entire bounding box fits inside the viewport.