Three.js Promise Loading

01_load_basic.js

const material = new THREE.MeshStandardMaterial({
  map: new THREE.TextureLoader().load('map.jpg'),
  normalMap: new THREE.TextureLoader().load('normalMap.jpg')
});

const loader = new THREE.JSONLoader();

loader.load('geometry.json', geometry => {
  const mesh = new THREE.Mesh(geometry, material);
  
  scene.add(mesh);
});

02_load_geo.js

function loadJSON(url) {
  return new Promise(resolve => {
    new THREE.JSONLoader.load(url, resolve);
  });
}

03_load_tex.js

function loadTexture(url) {
  return new Promise(resolve => {
    new THREE.TextureLoader().load(url, resolve);
  });
}

04_load_mat.js

function loadMaterial() {
  const textures = {
    map: 'map.jpg',
    normalMap: 'normalMap.jpg'
  };
  
  const params = {};
  
  const promises = Object.keys(textures).map(key => {
    return loadTexture(textures[key]).then(texture => {
      params[key] = texture;  
    });
  });
  
  return Promise.all(promises).then(() => {
    return new THREE.MeshStandardMaterial(params);
  });
}

05_load_mesh.js

function loadMesh() {
  const promises = [
    loadGeometry(),
    loadMaterial()
  ];
  
  return Promise.all(promises).then(result => {
    return new THREE.Mesh(result[0], result[1]);
  });
}

06_load_model.js

const model = {
  geometry: {
    url: 'geometry.json'
  },
  material: {
    map: 'map.jpg',
    normalMap: 'normalMap.jpg',
    metalness: 0.0,
    roughness: 1.0
  }
};

function loadMesh(model) {
  const promises = [
    loadGeometry(model.geometry),
    loadMaterial(model.material)
  ];
  
  return Promise.all(promises).then(result => {
    return new THREE.Mesh(result[0], result[1]);
  });
}

function loadGeometry(model) {
  return new Promise(resolve => {
    new THREE.JSONLoader().load(model.url, resolve);
  });
}

const textureKeys = ['map', 'normalMap']; // etc...

function loadMaterial(model) {
  const params = {};
  const promises = Object.keys(model).map(key => {
    // load textures for supported keys
    if (textureKeys.indexOf(key) !== -1) {
      return loadTexture(model[key]).then(texture => {
        params[key] = texture;
      });
    // just copy the value otherwise  
    } else {
      params[key] = model[key];
    }
  });
  
  return Promise.all(promises).then(() => {
    return new THREE.MeshStandardMaterial(params);
  });
}

function loadTexture(url) {
  return new Promise(resolve => {
    new THREE.TextureLoader().load(url, resolve);
  });
}

07_load_conditional.js

const model = {
  geometry: {
    geometry: new THREE.SphereGeometry()
  }
};

...

function loadGeometry(model) {
  if (model.geometry) {
    return Promise.resolve(model.geometry);
  }
  
  if (model.url) {
    return new Promise(resolve => {
      new JSONLoader().load(model.url, resolve);
    });  
  }
}

Snippets accompanying this medium post;