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


How to Use Scene Loader

The built in file type is .babylon and Babylon.js can load these without a plugin.

Note: Since meshes you import can have a rotationQuaternion set applying a rotation to one will have unforeseen consequences as detailed in this warning.

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:

To quickly add support for all loaders the following script can be added to your page:

Production links

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

Preview links (useful to test for changes to loaders)

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

For NPM usage see: https://www.npmjs.com/package/babylonjs-loaders

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 -

Loads all babylon assets from a string and appends them to the scene

BABYLON.SceneLoader.Append("", "data:" + gltfString, scene, function (scene) {
    // do something with the scene
});

Demo -

You can also load a .glb binary file from a data string as long as the binary data is base64 encoded:

var base64_model_content = "data:base64,BASE 64 ENCODED DATA...";
BABYLON.SceneLoader.Append("", base64_model_content, scene, function (scene) { 
    // do something with the scene
});

Note that two mime types are allowed in the string data:

var base64_model_content = "data:application/octet-stream;base64,-BASE 64 ENCODED DATA-";
var base64_model_content = "data:model/gltf-binary;base64,-BASE 64 ENCODED DATA-";

Demo -

SceneLoader.Load

Loads all babylon assets from the file and creates a new scene

BABYLON.SceneLoader.Load("/assets/", "batman.obj", engine, function (scene) { 
   // do something with the scene
});

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 -

SceneLoader.ImportAnimations

Loads the animations from the file and merges them to the scene You can customize the import process using options and callbacks

BABYLON.SceneLoader.ImportAnimations("./", "Elf_run.gltf", scene);

Demo -

SceneLoader.AppendAsync

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

Use the onPluginActivatedObservable to set properties and call methods specific to a particular loader.

BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (loader) {
    if (loader.name === "gltf") {
        // do something with the loader
        // loader.<option1> = <...>
        // loader.<option2> = <...>
    }
});

Alternatively, the static synchronous SceneLoader functions return the plugin.

var loader = BABYLON.SceneLoader.Load("./", "duck.gltf", engine, function (scene) {
    // do something with the scene
});

// do something with the loader
// loader.<option1> = <...>
// loader.<option2> = <...>

Loading multiple assets

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

Further Reading

Babylon 101

How To

Resources

API