Three.js加载glTF模型后如何立即获取正确的包围盒？

在Three.js中加载glTF 3D模型后，立即计算包围盒会得到错误结果，延迟一段时间计算则结果正确。代码示例如下：

const loader = new GLTFLoader();
loader.load(modelUrl, (gltf) => {

  const model = gltf.scene;
  model.position.x = -0.15;
  scene.add(model);

  // 显示错误的包围盒（黄色）
  const box = new THREE.BoxHelper(model, 0xffff00);
  scene.add(box);
});

loader.load(modelUrl, (gltf) => {

  const model = gltf.scene;
  model.position.x = 0.15;
  scene.add(model);

  // 显示正确的包围盒（红色）
  setTimeout(() => {
    const box = new THREE.BoxHelper(model, 0xff0000);
    scene.add(box);
  }, 100);
});

glTF模型加载完成的回调仅表示模型的JSON结构和资源（纹理、几何体数据）已加载到内存，但Three.js还未完成几何体的边界计算和模型世界矩阵的更新。BoxHelper的计算依赖于这些数据，而这些操作默认会在Three.js的渲染循环下一帧自动执行。直接在加载回调中创建BoxHelper，此时所需的矩阵和边界数据还未准备完全，因此得到错误结果。

无需使用setTimeout，可以通过以下两种方式解决：

方法1：手动触发数据更新 #

在创建BoxHelper前，手动触发模型的世界矩阵更新和几何体边界计算，确保数据就绪：

loader.load(modelUrl, (gltf) => {
  const model = gltf.scene;
  model.position.x = -0.15;
  scene.add(model);

  // 手动更新模型的世界矩阵（递归更新所有子对象）
  model.updateMatrixWorld(true);
  // 遍历所有网格对象，手动计算几何体的边界盒
  model.traverse((child) => {
    if (child.isMesh) {
      child.geometry.computeBoundingBox();
    }
  });

  // 此时创建的BoxHelper结果正确
  const box = new THREE.BoxHelper(model, 0xffff00);
  scene.add(box);
});

方法2：利用渲染帧循环延迟计算 #

通过requestAnimationFrame将包围盒计算推迟到下一帧，此时Three.js已自动完成矩阵和边界数据的初始化：

loader.load(modelUrl, (gltf) => {
  const model = gltf.scene;
  model.position.x = -0.15;
  scene.add(model);

  requestAnimationFrame(() => {
    const box = new THREE.BoxHelper(model, 0xffff00);
    scene.add(box);
  });
});

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