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 

Scene.append() takes a file path and will begin loading the scene, returning a Promise to the root Object3D, which allows manipulating the object after loading. The function will load all of the data from the file, so make sure there are no unwanted 3D objects in your file.

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    start() {
12        this.engine.scene.append(this.glbFile).then((obj) => {
13            obj.scale([this.scale, this.scale, this.scale]);
14        }).catch((error) => {
15            console.error("Failed to load GLB file:", error);
16        });
17    }
18}

Loading Animations 

If your .glb file contains an animation, Wonderland Editor will set up a basic animation component on the corresponding object. This component will have the first animation from the file assigned as its animation.

If you have more than one animation in your .glb file, they will currently be inaccessible at runtime. It will be easier and more efficient to load and manipulate them in Wonderland Editor and package them into the main .bin file, or alternatively use streamable .bin files to load them only once needed.