求助：Three.js LOD对象无法渲染任何模型问题排查

你的代码核心问题是异步加载时机错误，导致创建LOD时模型还未加载完成，克隆的是空对象，自然无法渲染。

具体原因 #

GLTFLoader.load() 是异步操作，代码执行到 treeHighDetail.clone() 和 treeLowDetail.clone() 时，两个模型文件还没加载完成，此时 treeHighDetail 和 treeLowDetail 都是空的 Object3D，克隆出来的对象也没有任何可渲染内容。

修复步骤 #

需要等待两个模型都加载完成后，再创建LOD并添加层级。可以用Promise封装加载逻辑，确保所有资源就绪后再处理LOD：

// 封装GLTF加载为Promise函数
function loadGLTF(url) {
  return new Promise((resolve) => {
    const gltfLoader = new THREE.GLTFLoader();
    gltfLoader.load(url, (gltf) => {
      // 设置阴影并返回场景对象
      gltf.scene.traverse(c => {
        c.castShadow = true;
      });
      resolve(gltf.scene);
    });
  });
}

// 并行加载两个模型
Promise.all([
  loadGLTF('./resources/tree.glb'), // 高模
  loadGLTF('./resources/low_poly_tree.glb') // 低模
]).then(([highDetailScene, lowDetailScene]) => {
  // 创建LOD并添加层级
  const lod = new THREE.LOD();
  
  // 添加高模层级：距离相机5单位内显示
  lod.addLevel(highDetailScene, 5);
  // 添加低模层级：距离相机5到20单位显示，超过20单位会隐藏
  lod.addLevel(lowDetailScene, 20);
  
  // 可设置LOD的位置（按需调整）
  lod.position.set(0, 0, 0);
  
  scene.add(lod);
});

额外注意事项 #

• 检查浏览器Network面板，确认两个模型文件是否成功加载（HTTP状态码200），如果路径错误会导致加载失败但控制台可能无报错。
• LOD的距离参数是相机到LOD对象的直线距离，确保相机的位置和LOD的位置设置合理，比如相机不要离LOD过远（超过20单位会完全隐藏）。
• 若需要复用模型，可在resolve前克隆场景对象，避免多个LOD共享同一模型实例：resolve(gltf.scene.clone())

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