如何从ThreeJS的DRACOLoader加载结果中获取可用mesh对象

问题原因 #

DRACOLoader.load() 是异步执行的方法，调用后会在后台加载drc文件、解码几何体，你写在load后面的console.log(mesh)会在回调函数执行前就运行，此时回调里给mesh赋值的逻辑还没触发，自然输出undefined。

解决方法 #

方法1：后续操作直接放入加载回调 #

把所有要用到mesh的逻辑都写到load的回调函数内部，保证执行时mesh已经完成初始化：

const loader = new DRACOLoader();
loader.setDecoderPath('./Three/examples/js/libs/draco/')
loader.load('PATHTO drc file', function(geometry) {
    const material = new THREE.PointsMaterial({ size: 0.05, vertexColors: false });
    const mesh = new THREE.Points(geometry, material);
    mesh.position.set(0, 0, -1);
    // 所有需要用到mesh的后续逻辑都写在这里
    console.log(mesh);
    // 示例：添加到场景
    scene.add(mesh);
});

方法2：用Promise封装加载逻辑 #

如果有多个异步加载依赖，或者后续逻辑不想耦合在回调里，可以把加载过程封装成Promise：

// 封装drc加载方法
function loadDracoModel(url) {
  return new Promise((resolve, reject) => {
    const loader = new DRACOLoader();
    loader.setDecoderPath('./Three/examples/js/libs/draco/');
    loader.load(
      url,
      (geometry) => {
        const material = new THREE.PointsMaterial({ size: 0.05, vertexColors: false });
        const mesh = new THREE.Points(geometry, material);
        mesh.position.set(0, 0, -1);
        resolve(mesh);
      },
      undefined, // 第二个参数为加载进度回调，不需要可留空
      (error) => reject(error) // 错误捕获
    );
  })
}

// 调用加载方法
loadDracoModel('PATHTO drc file')
.then(mesh => {
  // 拿到mesh后执行后续操作
  console.log(mesh);
  scene.add(mesh);
})
.catch(error => {
  console.error('drc模型加载失败', error);
})

方法3：async/await语法糖简化异步流程 #

如果运行环境支持ES7语法，可以用async/await让异步逻辑写法更接近同步代码：

// 复用方法2的封装逻辑
function loadDracoModel(url) {
  return new Promise((resolve, reject) => {
    const loader = new DRACOLoader();
    loader.setDecoderPath('./Three/examples/js/libs/draco/');
    loader.load(url, (geometry) => {
      const material = new THREE.PointsMaterial({ size: 0.05, vertexColors: false });
      const mesh = new THREE.Points(geometry, material);
      mesh.position.set(0, 0, -1);
      resolve(mesh);
    }, undefined, reject);
  })
}

// 用async函数调用
async function initScene() {
  try {
    const mesh = await loadDracoModel('PATHTO drc file');
    // 直接使用mesh执行后续操作
    console.log(mesh);
    scene.add(mesh);
  } catch (error) {
    console.error('模型加载失败', error);
  }
}

initScene();

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