Three.js加载多JSON模型相机目标居中优化及分组求中心失败问题

Hey Andrea, let's fix your two key issues step by step:

1. 解决内存占用激增的问题 #

你的第一个方法（合并所有部件为单个网格）之所以导致内存暴涨，核心原因是完全没必要合并几何体——你只是需要计算模型整体的中心，不需要把所有顶点数据复制到一个几何体里。

另外，你的unifyComponents函数大概率存在全局变量累积的问题：如果singleGeometry和singleMesh是全局变量，每次调用该函数都会把新的mesh几何数据追加进去，导致几何体量无限增长，直接吃掉GB级内存。

解决方案：彻底放弃合并几何体的思路，改用计算所有部件的联合边界盒来求中心，完全不需要复制任何顶点数据，内存占用会大幅降低。

2. 解决Group求中心返回(0,0,0)的问题 #

你的addGroupComponents + getCenterOfMesh方法返回(0,0,0)，几乎可以肯定是子对象的世界矩阵未更新导致的。THREE.Box3.setFromObject()依赖对象的世界变换矩阵来计算正确的空间边界盒，如果你的mesh有位置/旋转/缩放变换，但没有更新其世界矩阵，setFromObject()会使用初始的默认矩阵（对应(0,0,0)位置），自然得到错误的中心。

修正后的Group方案 #

确保在计算边界盒前，所有子对象的世界矩阵是最新的：

// 初始化Group（确保是干净的实例，无额外变换）
const groupComponents = new THREE.Group();

function addGroupComponents(mesh) {
  // 添加前更新mesh的世界矩阵，确保变换生效
  mesh.updateMatrixWorld(true);
  groupComponents.add(mesh);
}

function getCenterOfMesh() {
  const center = new THREE.Vector3();
  const boundBox = new THREE.Box3();
  
  // 更新Group所有子对象的世界矩阵（保险起见）
  groupComponents.updateMatrixWorld(true);
  boundBox.setFromObject(groupComponents);
  
  boundBox.getCenter(center);
  
  // 保留两位小数，和你原逻辑一致
  center.x = Math.round(center.x * 100) / 100;
  center.y = Math.round(center.y * 100) / 100;
  center.z = Math.round(center.z * 100) / 100;
  
  console.log(`center is: X=${center.x}, Y=${center.y}, Z=${center.z}`);
  return center;
}

更灵活的无Group方案（推荐） #

如果你不需要用Group管理部件，直接遍历所有mesh计算联合边界盒更高效，也避免Group带来的潜在问题：

// 假设你有一个数组存储所有加载的mesh部件
const modelParts = [];

// 加载每个部件后存入数组
function addModelPart(mesh) {
  // 立即更新世界矩阵，确保变换生效
  mesh.updateMatrixWorld(true);
  modelParts.push(mesh);
}

function getCombinedCenter() {
  if (modelParts.length === 0) return new THREE.Vector3(0, 0, 0);
  
  const combinedBox = new THREE.Box3();
  
  modelParts.forEach(mesh => {
    // 获取当前mesh的世界空间边界盒
    const meshBox = new THREE.Box3().setFromObject(mesh);
    // 合并到总边界盒
    combinedBox.union(meshBox);
  });
  
  const center = new THREE.Vector3();
  combinedBox.getCenter(center);
  
  // 保留两位小数
  center.x = Math.round(center.x * 100) / 100;
  center.y = Math.round(center.y * 100) / 100;
  center.z = Math.round(center.z * 100) / 100;
  
  console.log(`center is: X=${center.x}, Y=${center.y}, Z=${center.z}`);
  return center;
}

关键注意事项 #

• 永远不要为了求中心而合并几何体：这是完全的资源浪费，THREE.js提供的Box3已经可以高效计算多个对象的联合边界盒。
• 确保对象的世界矩阵是最新的：当你对mesh进行位置/旋转/缩放变换后，一定要调用mesh.updateMatrixWorld(true)（true表示递归更新子对象），否则setFromObject()会使用旧的矩阵数据。
• 避免全局变量累积：如果必须使用全局变量，确保每次计算前重置它们（比如重新创建singleGeometry），但最好改用局部变量或数组管理部件。

内容的提问来源于stack exchange，提问作者Andrea