GLTF/GLB zur Laufzeit Laden

Um große Projekte in der Wonderland Engine zu erstellen, möchtest du möglicherweise Assets nur dann laden, wenn du sie benötigst. Das Laden von Assets zur Laufzeit reduziert Unordnung im Editor und ermöglicht dynamische Ladelösungen für große und komplexe Szenen.

Die Wonderland Engine bietet zwei Optionen für das Laden von Assets zur Laufzeit: Laden von .glb/.gltf-Dateien oder Streamen von .bin-Dateien.

Aktivieren des GLTF-Ladens zur Laufzeit 

Das GLTF-Laden zur Laufzeit ist eine optionale Funktion, die im Wonderland Editor aktiviert werden muss. Öffne dein Projekt und navigiere zu Ansichten > Projekteinstellungen > Laufzeit und aktiviere das Kontrollkästchen enableRuntimeGltf.

Hinzufügen einer Datei für das Laufzeitladen 

Der einfachste Weg, Dateien für das Laufzeitladen vorzubereiten, ist, sie in den static-Ordner deines Projekts hinzuzufügen. Der Inhalt dieses Ordners wird in den deploy-Ordner deines Projekts kopiert, wenn du dein Projekt packst.

Der deploy-Ordner ist das Webserver-Root des Wonderland Editors, daher sollte jede URL, die auf ein Asset dort verweist, relativ zu diesem angegeben werden.

Beispiel: static/mein-ordner/mein-modell.glb wird in deploy/mein-ordner/mein-modell.glb kopiert und kann über /mein-ordner/mein-modell.glb (wenn das Projekt später auf einem Root-Pfad deines Webservers bereitgestellt wird) oder mein-ordner/mein-modell.glb aufgerufen werden.

Laden aus JavaScript 

Verwende WonderlandEngine.loadGLTF(), um eine glTF/GLB-Datei herunterzuladen und in ein PrefabGLTF zu parsen. Anschließend wird sie mit Scene.instantiate() in die aktuelle Szene instanziiert. Dies bietet eine strukturierte Wrapper-Lösung und vermeidet veraltete APIs.

Beispiel 

Eine Komponente, die eine .glb-Datei lädt und sie skaliert, wenn deine App startet, könnte wie folgt aussehen:

import {Component, Property} from '@wonderlandengine/api';

export class LoadGlbAndScale extends Component {
    static TypeName = 'load-glb-and-scale';

    static Properties = {
        glbFile: Property.string('exampleGLB.glb'),
        scale: Property.float(1.0),
    };

    async start() {
        try {
            const prefab = await this.engine.loadGLTF({file: this.glbFile});
            const {root} = this.engine.scene.instantiate(prefab);
            root.setScalingWorld([this.scale, this.scale, this.scale]);
        } catch (error) {
            console.error('Fehler beim Laden der GLB-Datei:', error);
        }
    }
}

Laden von Animationen 

Wenn deine .glb-Datei Animationen enthält, kannst du über die instanziierte Hierarchie darauf zugreifen und bei Bedarf eine AnimationComponent anhängen. Für komplexe Setups ist es vorzuziehen, Animationen im Editor zu erstellen und in dein Haupt-.bin zu packen oder streambare .bin-Dateien zu verwenden, um sie bei Bedarf zu laden.