Babylon.js Loading Scenes — Importing 3D Models
In this tutorial, you will learn about Babylon.js Loading Scenes. We cover key concepts, practical examples, and best practices to help you master this topic.
Babylon.js SceneLoader imports 3D models in glTF, GLB, and .babylon formats with progress tracking, error handling, and asset management.
What You'll Learn
By the end of this guide, you will load .glb and .glTF models with SceneLoader, track loading progress with callbacks, handle loading errors, import scenes into existing scenes, and optimize loading with compression and Draco decoding.
Load GLB Model
BABYLON.SceneLoader.ImportMesh('', './models/', 'model.glb', scene, function(newMeshes) {
console.log('Model loaded:', newMeshes.length, 'meshes');
newMeshes[0].position.y = 1;
});
Load with Progress
BABYLON.SceneLoader.ImportMesh('', './models/', 'model.glb', scene, function(meshes) {
console.log('Loaded:', meshes.length, 'meshes');
}, function(event) {
var progress = (event.loaded / event.total) * 100;
document.getElementById('progress').style.width = progress + '%';
}, function(scene, message, exception) {
console.error('Load error:', message, exception);
});
Append to Existing Scene
BABYLON.SceneLoader.Append('./models/', 'scene.babylon', scene, function() {
console.log('Scene appended');
});
Draco Compression
// Load Draco decoder
BABYLON.DracoCompression.Configuration = {
decoder: {
wasmUrl: 'https://www.babylonjs.com/draco_wasm_wrapper_gltf.js'
}
};
BABYLON.SceneLoader.ImportMesh('', './models/', 'compressed.glb', scene, function(meshes) {
console.log('Draco mesh loaded');
});
Common Mistakes
1. Wrong File Path
SceneLoader resolves paths relative to the HTML page. Use absolute paths or verify relative path.
2. Missing File Extension
Include .glb or .gltf extension in the file name parameter.
3. CORS Issues
Loading models from different origins requires CORS headers on the server.
4. No Progress Feedback
Models over 5MB should show a progress bar. Use the progress callback.
5. Not Handling Import Errors
The error callback is optional. Always provide it for debugging load failures.
Practice Questions
Q1: What formats does SceneLoader support? A: .glb, .gltf, .babylon, .obj, .stl.
Q2: How do you load a model into the scene? A: BABYLON.SceneLoader.ImportMesh('', rootUrl, fileName, scene, callback).
Q3: How do you show loading progress? A: Pass a progress callback: function(event) { var pct = event.loaded / event.total; }.
Q4: How do you handle load errors? A: Pass an error callback: function(scene, message, exception) { }.
Q5: What is Draco compression? A: A geometry compression format that reduces file size. Requires the Draco decoder.
Challenge: Build a loading screen that shows a 3D spinner, loads a complex model with progress tracking, and transitions smoothly to the scene.
FAQ
Try It Yourself
Load a GLB model with progress.
<!DOCTYPE html>
<html>
<head>
<title>Babylon.js Loading</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<style>
#loader { position: relative; width: 300px; height: 20px; background: #eee; border-radius: 10px; overflow: hidden; }
#progress { width: 0%; height: 100%; background: #4ecdc4; transition: width 0.3s; }
</style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Model Loader</h2>
<div id="loader"><div id="progress"></div></div>
<button onclick="loadModel()">Load Model</button>
<canvas id="renderCanvas" style="width:100%;height:400px;border-radius:8px;margin-top:8px;"></canvas>
<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI/2, Math.PI/3, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
// Add a default cube
var defaultBox = BABYLON.MeshBuilder.CreateBox('default', { size: 2 }, scene);
function loadModel() {
defaultBox.dispose();
document.getElementById('progress').style.width = '0%';
// Load from Babylon.js sample model
BABYLON.SceneLoader.ImportMesh('', 'https://www.babylonjs.com/assets/DamagedHelmet/', 'glTF.gltf', scene, function(meshes) {
document.getElementById('progress').style.width = '100%';
meshes.forEach(function(m) {
m.position.y = 0;
m.scaling.scaleInPlace(0.5);
});
}, function(event) {
if (event.total) {
var pct = (event.loaded / event.total) * 100;
document.getElementById('progress').style.width = pct + '%';
}
}, function(scene, message, exception) {
console.error('Load error:', message);
document.getElementById('progress').style.background = '#ff6b35';
});
}
engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
</script>
</body>
</html>
What's Next
Build a complete Babylon.js project.
Project — Complete 3D project.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro