使用THREE.js加载数据推入列表后返回空列表是什么原因

你遇到的问题是JavaScript异步执行机制导致的：THREE.FileLoader.load()是异步API，调用后不会阻塞后续代码执行，会直接发送请求然后继续向下运行。你在load调用结束后直接返回loadedData时，网络请求还没有完成，给loadedData赋值的成功回调函数还没有触发，因此拿到的是空数组。

将加载逻辑用Promise封装，异步获取结果即可，示例代码如下：

function loadData() {
  return new Promise((resolve, reject) => {
    const loader = new THREE.FileLoader();
    loader.load(
      dataFileUrl,
      function (data) {
        // 加载完成后直接通过resolve返回处理好的结果
        const loadedData = data.split('\n');
        resolve(loadedData);
      },
      function (xhr) {
        console.log(`Loading data : ${xhr.loaded / xhr.total * 100}% loaded`);
      },
      function(err) {
        console.error(err);
        reject(err);
      }
    );
  })
}

封装后有两种常用的调用方式：

• 方式1：使用.then链式调用

loadData().then(loadedData => {
  // 所有需要用到加载后数据的逻辑都写在这里
  console.log(loadedData);
})

• 方式2：使用async/await语法（代码需要放在async函数内）

async function init() {
  const loadedData = await loadData();
  // 所有需要用到加载后数据的逻辑都写在这里
  console.log(loadedData);
}
init();

不要尝试用同步返回的方式获取异步请求的结果，所有依赖加载完成数据的逻辑，必须放在请求完成的回调、Promise的.then回调、或者await关键字之后执行。

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