Loading GLTF/GLB at Runtime
To build large projects in Wonderland Engine, you might want to load in assets only when you need them. Loading assets at runtime reduces clutter in your editor and allow for dynamic loading solutions for large and complex scenes.
Wonderland Engine provides two options for loading assets at runtime: Loading from .glb/.gltf files or streaming .bin files.
Enabling Runtime GLTF Loading
Runtime GLTF loading is an optional feature that needs to be enabled in Wonderland Editor.
Open your project and navigate to Views > Project Settings > Runtime
and select the enableRuntimeGltf
checkbox.
Adding a File for Runtime Loading
The easiest way to prepare files for runtime loading is to add them to your project’s static
folder, whose contents will be copied into your project’s deploy
folder when you package your project.
The deploy
folder is Wonderland Editor’s web server root and therefore any URL that references an asset there should be specified relative to it.
Example: static/my-folder/my-model.glb
will be copied into deploy/my-folder/my-model.glb
and can be accessed through /my-folder/my-model.glb
(if the project is deployed to a root path on your web server later on) or my-folder/my-model.glb
.
Loading from JavaScript
Use WonderlandEngine.loadGLTF() to download and parse a glTF/GLB into a PrefabGLTF. Then instantiate it into the current scene with Scene.instantiate(). This provides a structured wrapper and avoids deprecated APIs.
Example
A component that loads a .glb file and scales it when your app launches may look as follows:
1import {Component, Property} from '@wonderlandengine/api';
2
3export class LoadGlbAndScale extends Component {
4 static TypeName = 'load-glb-and-scale';
5
6 static Properties = {
7 glbFile: Property.string('exampleGLB.glb'),
8 scale: Property.float(1.0),
9 };
10
11 async start() {
12 try {
13 const prefab = await this.engine.loadGLTF({file: this.glbFile});
14 const {root} = this.engine.scene.instantiate(prefab);
15 root.setScalingWorld([this.scale, this.scale, this.scale]);
16 } catch (error) {
17 console.error('Failed to load GLB file:', error);
18 }
19 }
20}
Loading Animations
If your .glb file contains animations, you can access them via the instantiated hierarchy and attach an AnimationComponent as needed. For complex setups, prefer authoring animations in the editor and packaging them into your main .bin, or use streamable .bin files to load them when needed.