SceneLoader class (legacy)

Once the plugin is referenced, the SceneLoader class can be used. It provides a few loading methods.

SceneLoader.Append

Loads all Babylon assets from the file and appends them to the scene.

import { AppendSceneAsync } from "@babylonjs/core/Loading/sceneLoader";
AppendSceneAsync("duck.gltf", scene).then(function () {
    // do something with the scene
});

See an example here: Append An Object

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

import { AppendSceneAsync } from "@babylonjs/core/Loading/sceneLoader";
AppendSceneAsync("data:" + gltfString, scene).then(function () {
    // do something with the scene
});

See an example here: Append Assets From A String

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

import { AppendSceneAsync } from "@babylonjs/core/Loading/sceneLoader";
const base64_model_content = "data:;base64,BASE 64 ENCODED DATA...";
AppendSceneAsync(base64_model_content, scene).then(function () {
    // do something with the scene
});

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

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

See an example here: Load .glb From Binary Data

LoadSceneAsync

Loads all Babylon assets from the file and creates a new scene.

import { LoadSceneAsync } from "@babylonjs/core/Loading/sceneLoader";
LoadSceneAsync("/assets/", "batman.obj", engine).then(function (scene) {
    // do something with the scene
});

SceneLoader.ImportMesh

Note: This function is deprecated. Use the ImportMeshAsync function instead.

Loads the meshes from the file and appends them to the scene.

import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
// The first parameter can be set to null to load all meshes and skeletons
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
});

See an example here: Import Mesh

ImportMeshAsync

Asynchronous version of the ImportMesh function. The result can be obtained by calling the returned Promise or by using the await keyword (note: to use the await keyword in the createScene function, it has to be marked as async in its definition).

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
// The first parameter can be set to null to load all meshes and skeletons
const importPromise = ImportMeshAsync("./duck.gltf", scene, { meshNames: ["myMesh1", "myMesh2"] });
importPromise.then((result) => {
    //// Result has meshes, particleSystems, skeletons, animationGroups and transformNodes
});

See an example here: Import Mesh Async with Promises

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
// The first parameter can be set to null to load all meshes and skeletons
const result = await ImportMeshAsync("./duck.gltf", scene, { meshNames: ["myMesh1", "myMesh2"] });

See an example here: Import Mesh Async with await

LoadAssetContainerAsync

Loads all Babylon assets from the file and does not append them to the scene.

import { LoadAssetContainerAsync } from "@babylonjs/core/Loading/sceneLoader";
LoadAssetContainerAsync("./duck.gltf", scene).then(function (container) {
    const meshes = container.meshes;
    const materials = container.materials;
    //...
    // Adds all elements to the scene
    container.addAllToScene();
});

See an example here: Asset Container Load Example

ImportAnimationsAsync

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

import { ImportAnimationsAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportAnimationsAsync("./Elf_run.gltf", scene);

See an example here: Importing Animations

AppendSceneAsync

There are also Async versions of these functions that return promises:

import { AppendSceneAsync } from "@babylonjs/core/Loading/sceneLoader";
AppendSceneAsync("./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.

import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
SceneLoader.OnPluginActivatedObservable.add(function (loader) {
    if (loader.name === "gltf") {
        // do something with the loader
        // loader.<option1> = <...>
        // loader.<option2> = <...>
    }
});

Loading multiple assets

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

Direct loading base64 encoded models

Babylon.js supports directly loading models from base64-encoded Data URLs without needing to create an object URL or download the file. When loading from a base64 data URL, the plugin is not automatically detected (with the exception of some glb formats). The pluginExtension parameter should be set when using base64 data URLs to ensure the correct plugin is used to load the model.

The format for a minimum base64 encoded model file is:

data:;base64,<base64_encoded_file_contents>

The ; before base64 and the , following it are both required. See here for an example of loading an obj file in base64 encoding:

Load base64 model