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;});