加载对象后的threejs中心相机答案

【问题标题】：threejs recenter camera after loading objects加载对象后的threejs中心相机
【发布时间】：2019-04-23 03:12:13
【问题描述】：

加载几个 gltf 文件后，我正在重命名这些文件并尝试重新定位相机，使其居中并查看新对象的质心，并且整个场景都适合相机。

但居中并不总是有效，有时质心在完全不同的地方计算。以下代码仅在所有对象加载后在render() 中运行一次：

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);

这是质心的函数：

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]);
}

【问题讨论】：

标签： three.js

【解决方案1】：

暂时忽略让整个场景适合相机的问题（这是一个常见问题，我相信你可以在网上找到有用的信息（也许this？）。

相反，让我们专注于您的主要问题：您希望找到一组对象的中心。您当前正在做的是计算对象中心的平均值。这意味着如果您在最左侧有一个对象，在最右侧有 9 个对象，您计算的中心点也将在最右侧。（假设物体质量相似，这将是质心的近似值。）

但是，为了使相机居中以使每个对象都可见，您对质心不感兴趣，但您希望找到一个点，使得到最左边点的距离等于到最左边点的距离最右边，类似地从最低到最高，等等。可以使用所有对象的bounding box 找到这样的点。这个边界框的中心就是您要寻找的点。

如果您的相机要与轴对齐，您可以轻松地为每个对象计算这样的边界框，如下所示：

new THREE.Box3().setFromObject(myMesh)

所有对象的边界框只是由您计算的所有对象边界框的最低和最高坐标表示的框。完整边界框的中心将为您提供您所追求的点。

接下来，假设相机与轴对齐，问题只是找到相机到该点的合适距离，以便整个边界框适合视口。

【讨论】：