Blenderで作ったglbファイルを並列でThree.jsに読み込む 📦

GLTFLoaderでモデルを読み込む際、配列でURLを渡せると非常に楽だなと思い、つくってみました。

JavaScript

async function loadGltfFromUrls(urls) {
  if (!urls.length) {
    return [];
  }

  const loader = new GLTFLoader();
  const list = [];

  urls.forEach((url) => {
    list.push(new Promise((resolve) => {
      loader.load(
        url,
        (gltf) => {
          resolve(gltf.scene);
        },
        (err) => {
          console.error(err);
        }
      );
    }));
  });

  return Promise.all(list).then((objs) => {
    return objs;
  }).catch((err) => {
    console.error(err);
  });
}

使い方

      const urls = [
        './cubeA.glb',
        './cubeB.glb',
        './cubeC.glb'
      ];

      const [ cubeA, cubeB, cubeC ] = await loadGltfFromUrls(urls);