To load a file of a given type, Babylon must first have a reference to the plugin for that file type.
Currently plugins can be found for:
Once the plugin is referenced, the SceneLoader class can be used which provides a few loading methods.
SceneLoader.Append - Loads all babylon assets from the file and appends them to the scene
BABYLON.SceneLoader.Append("./", "duck.gltf", scene, function (scene) {
// do something with the scene
});
Demo -
SceneLoader.Load - Loads all babylon assets from the file and creates a new scene
BABYLON.SceneLoader.Load("/assets/", "batman.obj", engine, function (newScene) {
// ...
});
SceneLoader.ImportMesh - Loads the meshes from the file and appends them to the scene
// The first parameter can be set to null to load all meshes and skeletons
BABYLON.SceneLoader.ImportMesh(["myMesh1", "myMesh2"], "./", "duck.gltf", scene, function (meshes, particleSystems, skeletons) {
// do something with the meshes and skeletons
// particleSystems are always null for glTF assets
});
Demo -
SceneLoader.LoadAssetContainer - Loads all babylon assets from the file and does not append them to the scene
BABYLON.SceneLoader.LoadAssetContainer("./", "duck.gltf", scene, function (container) {
var meshes = container.meshes;
var materials = container.materials;
//...
// Adds all elements to the scene
container.addAllToScene();
});
Demo -
There are also Async
versions of these functions that return promises:
BABYLON.SceneLoader.AppendAsync("./", "duck.gltf", scene).then(function (scene) {
// do something with the scene
});
See How to Use Promises to learn more about using promises.
The SceneLoader returns the glTF loader instance to enable setting properties and calling methods.
var loader = BABYLON.SceneLoader.Load("./", "duck.gltf", engine, function (scene) {
// do something with the scene
});
// do something with the loader
// loader.<option1> = <...>
// loader.<option2> = <...>
// loader.dispose();
For assistance when load multiple assets the AssetsManager class can be used. See Load Files with Assets Manager