How To

Use the glTF File Loader Plugin


glTF File Import

Demo -


Setup

The glTF loader files are located here.

Full Version

This loader supports both glTF 1.0 and 2.0 and will use the correct loader based on the glTF version string.

<script src="babylon.js"></script>
<script src="babylon.glTFFileLoader.js"></script>

Version 1 Only

This loader supports only glTF 1.0 and will fail to load glTF 2.0.

<script src="babylon.js"></script>
<script src="babylon.glTF1FileLoader.js"></script>

Version 2 Only

This loader supports only glTF 2.0 and will fail to load glTF 1.0.

<script src="babylon.js"></script>
<script src="babylon.glTF2FileLoader.js"></script>

Loading the Scene

Use one of the static function on the SceneLoader to load a glTF asset. See how to load from any file type.

Common Properties

onParsed

Raised when the asset has been parsed. The data.json property stores the glTF JSON. The data.bin property stores the BIN chunk from a glTF binary or null if the input is not a glTF binary.

loader.onParsed = function (data) {
    // do something with the data
};

Version 1 Properties

IncrementalLoading

Set this property to false to disable incremental loading which delays the loader from calling the success callback until after loading the meshes and shaders. Textures always loads asynchronously. For example, the success callback can compute the bounding information of the loaded meshes when incremental loading is disabled. Defaults to true.

BABYLON.GLTFFileLoader.IncrementalLoading = false;

HomogeneousCoordinates

Set this property to true in order to work with homogeneous coordinates, available with some converters and exporters. Defaults to false.

BABYLON.GLTFFileLoader.HomogeneousCoordinates = true;

Version 2 Properties

coordinateSystemMode

The coordinate system mode (AUTO, FORCE_RIGHT_HANDED). Defaults to AUTO.

  • AUTO - Automatically convert the glTF right-handed data to the appropriate system based on the current coordinate system mode of the scene.
  • FORCE_RIGHT_HANDED - Sets the useRightHandedSystem flag on the scene.
loader.coordinateSystemMode = BABYLON.GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED;

animationStartMode

The animation start mode (NONE, FIRST, ALL). Defaults to FIRST.

  • NONE - No animation will start.
  • FIRST - The first animation will start.
  • ALL - All animations will start.
loader.animationStartMode = BABYLON.GLTFLoaderAnimationStartMode.NONE;

compileMaterials

Set to true to compile materials before raising the success callback. Defaults to false.

loader.compileMaterials = true;

useClipPlane Set to true to also compile materials with clip planes. Defaults to false.

loader.useClipPlane = true;

compileShadowGenerators

Set to true to compile shadow generators before raising the success callback. Defaults to false.

loader.compileShadowGenerators = true;

onMeshLoaded

Raised when the loader creates a mesh after parsing the glTF properties of the mesh.

loader.onMeshLoaded = function (mesh) {
    // do something with the mesh
};

onTextureLoaded

Raised when the loader creates a texture after parsing the glTF properties of the texture.

loader.onTextureLoaded = function (texture) {
    // do something with the texture
};

onMaterialLoaded

Raised when the loader creates a material after parsing the glTF properties of the material.

loader.onMaterialLoaded = function (material) {
    // do something with the material
};

onComplete

Raised when the asset is completely loaded, immediately before the loader is disposed. For assets with LODs, raised when all of the LODs are complete. For assets without LODs, raised when the model is complete, immediately after onSuccess.

loader.onComplete = function () {
    // do something when loading is complete
};

Version 2 Methods

dispose

Disposes the loader, releases resources during load, and cancels any outstanding requests.

// cancel loading of the current glTF asset
loader.dispose();