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.