How To

Load from any file type - glTF, OBJ, STL, etc.


How to Use SceneLoader

Basic Usage

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.

Advanced Usage

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

Loading multiple assets

For assistance when load multiple assets the AssetsManager class can be used. See Load Files with Assets Manager