Three.js调试GLTF模型尺寸位置 解决模型加载不显示问题

不同创作者导出的GLTF模型没有统一的尺寸、原点、坐标基准，你写死的相机位置、缩放参数刚好适配蛇雕像的原生参数，大卫模型的原生参数和蛇雕像差了几个数量级，手动试参数很难蒙对正确值。你看到的可移动极小白点就是模型本身，要么是尺寸极端（过大/过小）超出视锥体范围，要么是模型整体偏移到视锥体边缘，缩放参数不对就会直接消失。

不要手动猜缩放、位置参数，按下面的流程标准化处理所有外部加载的GLTF模型即可：

• 加载模型后自动计算包围盒，完成自动居中和归一化缩放
  替换你loader加载回调里的手动设置position、scale的代码，用包围盒自动计算适配参数：

  loader.load( '你的大卫模型路径/scene.gltf', function ( gltf ) {
    const loadedModel = gltf.scene;
    // 遍历网格先兜底处理材质
    loadedModel.traverse(node => {
      if (node.isMesh) {
        node.material.side = THREE.DoubleSide; // 排除面反转导致的看不见问题
        node.castShadow = true;
        node.receiveShadow = true;
      }
    })
    // 计算模型实际包围盒
    const box = new THREE.Box3().setFromObject(loadedModel);
    const modelSize = box.getSize(new THREE.Vector3());
    const modelCenter = box.getCenter(new THREE.Vector3());
    // 自动将模型中心对齐到场景原点
    loadedModel.position.sub(modelCenter);
    // 自动缩放：将模型最长边统一缩放到2单位长度，适配你当前z=5的相机位置
    const maxDim = Math.max(modelSize.x, modelSize.y, modelSize.z);
    loadedModel.scale.setScalar(2 / maxDim);
  
    scene.add(loadedModel);
    model = loadedModel;
  })
  

• 补全光照配置
  你当前只加了一个正前方的平行光，如果模型材质是高粗糙度漫反射材质，很容易出现大面积死黑，看起来和没加载一样，初始化灯光时补一个环境光兜底：

  // 放在平行光初始化代码附近
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
  scene.add(ambientLight);
  

• 调试阶段可加相机自动适配，快速定位模型
  如果按上面操作还是找不到模型，加载完模型后直接让相机自动对准模型，不用手动猜位置：

  // 放在模型add到scene之后
  camera.position.copy(modelCenter);
  camera.position.z += maxDim * 2.5; // 相机距离模型2.5倍模型长度，保证完整显示
  camera.lookAt(modelCenter);
  

第三方平台下载的公开模型，导出时用的单位（米/厘米/英寸）、原点位置都不统一，部分创作者导出前不会重置模型变换，甚至会出现模型离原点几十上百个单位的情况，永远不要靠手动试参数适配模型，用包围盒自动计算是加载外部模型的标准处理流程。

内容的提问来源于stack exchange，提问作者Cat Named Dog