Caricamento di GLTF/GLB a Runtime

Per costruire grandi progetti in Wonderland Engine, potresti voler caricare gli asset solo quando ne hai bisogno. Caricare asset a runtime riduce il disordine nel tuo editor e consente soluzioni di caricamento dinamico per scene grandi e complesse.

Wonderland Engine offre due opzioni per caricare asset a runtime: Caricare da file .glb/.gltf o eseguire lo streaming di file .bin.

Abilitare il Caricamento di GLTF a Runtime 

Il caricamento di GLTF a runtime è una funzione opzionale che deve essere abilitata nel Wonderland Editor. Apri il tuo progetto e vai su Views > Project Settings > Runtime e seleziona la casella enableRuntimeGltf.

Aggiungere un File per il Caricamento a Runtime 

Il modo più semplice per preparare i file per il caricamento a runtime è aggiungerli alla cartella static del tuo progetto, il cui contenuto verrà copiato nella cartella deploy del tuo progetto quando esporterai un progetto.

La cartella deploy è la root del server web di Wonderland Editor e quindi qualsiasi URL che fa riferimento a un asset lì deve essere specificato in modo relativo.

Esempio: static/my-folder/my-model.glb verrà copiato in deploy/my-folder/my-model.glb e può essere accesso tramite /my-folder/my-model.glb (se il progetto viene distribuito su un percorso root sul tuo server web più avanti) o my-folder/my-model.glb.

Caricamento da JavaScript 

Usa WonderlandEngine.loadGLTF() per scaricare e analizzare un glTF/GLB in un PrefabGLTF. Quindi, istanzialo nella scena corrente con Scene.instantiate(). Questo fornisce un wrapper strutturato ed evita API deprecate.

Esempio 

Un componente che carica un file .glb e lo scala quando la tua app viene lanciata potrebbe apparire come segue:

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('Impossibile caricare il file GLB:', error);
        }
    }
}

Caricamento delle Animazioni 

Se il tuo file .glb contiene animazioni, puoi accedervi attraverso la gerarchia istanziata e allegare un AnimationComponent come necessario. Per configurazioni complesse, è preferibile creare le animazioni nell’editor e includerle nel tuo .bin principale o usare file .bin streamable per caricarli quando necessario.