Promises
Introduction
Starting with v3.2, we introduced (without breaking backward compatibility of course) a new pattern: the promises. To learn more about promises, please read this great MDN web documentation
In a nutshell, the basic idea is to rely on promises instead of having to deal with pyramids of callbacks intricated in a non easy to maintain way. Regarding portability, Babylon.js provides a custom polyfill for browsers where promises are not supported so you can blindly use them.
Examples
Basic usage
BABYLON.SceneLoader.LoadAssetContainerAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene).then(function (container) {container.addAllToScene();});
Chaining multiple promises together
var scene = new BABYLON.Scene(engine);var xrPromise = scene.createDefaultXRExperienceAsync();xrPromise.then((xrExperience) => {return BABYLON.SceneLoader.AppendAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene);}).then(function () {// xr resolved, skull added to the scene});
Using async/await with promises
Note: This is not supported in all browsers
var main = async function () {var scene = new BABYLON.Scene(engine);var helper = scene.createDefaultVRExperience();var supported = await helper.webVRCamera.useStandingMatrixAsync();console.log(supported);await BABYLON.SceneLoader.AppendAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene);};
Loading two glTF assets in parallel
var scene = new BABYLON.Scene(engine);var baseUrl = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";Promise.all([BABYLON.SceneLoader.ImportMeshAsync(null, baseUrl + "BoomBox/glTF/", "BoomBox.gltf", scene).then(function (result) {result.meshes[0].position.x = 0.01;}),BABYLON.SceneLoader.ImportMeshAsync(null, baseUrl + "Avocado/glTF/", "Avocado.gltf", scene).then(function (result) {result.meshes[0].position.x = -0.01;result.meshes[0].position.y = -0.01;result.meshes[0].scaling.scaleInPlace(0.25);}),]).then(() => {scene.createDefaultCameraOrLight(true, true, true);scene.activeCamera.alpha += Math.PI;});