Загрузка GLTF/GLB во время выполнения

Для создания крупных проектов в Wonderland Engine может потребоваться загружать ресурсы только тогда, когда они необходимы. Загрузка ресурсов во время выполнения уменьшает загромождение в вашем редакторе и позволяет реализовать динамическую загрузку для больших и сложных сцен.

Wonderland Engine предоставляет два варианта загрузки ресурсов во время выполнения: загрузка из .glb/.gltf файлов или потоковая передача .bin файлов.

Включение загрузки GLTF во время выполнения 

Загрузка GLTF во время выполнения — это опциональная функция, которую необходимо включить в редакторе Wonderland. Откройте ваш проект и перейдите в Вид > Настройки проекта > Выполнение и выберите флажок enableRuntimeGltf.

Добавление файла для загрузки во время выполнения 

Самый простой способ подготовить файлы для загрузки во время выполнения — это добавить их в папку static вашего проекта. Содержимое этой папки будет скопировано в папку deploy вашего проекта, когда вы упакуете свой проект.

Папка deploy является корнем веб-сервера редактора Wonderland, поэтому любой URL, ссылающийся на ресурсы в этой папке, должен указываться относительно нее.

Пример: static/my-folder/my-model.glb будет скопирован в deploy/my-folder/my-model.glb и может быть доступен через /my-folder/my-model.glb (если проект развернут в корневой путь на вашем веб-сервере) или my-folder/my-model.glb.

Загрузка из JavaScript 

Используйте WonderlandEngine.loadGLTF() для загрузки и парсинга glTF/GLB в PrefabGLTF. Затем создайте экземпляр в текущей сцене с помощью Scene.instantiate(). Это обеспечивает структурированную обертку и избегает устаревших API.

Пример 

Компонент, который загружает .glb файл и изменяет его масштаб при запуске вашего приложения, может выглядеть следующим образом:

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('Не удалось загрузить GLB файл:', error);
        }
    }
}

Загрузка анимаций 

Если ваш .glb файл содержит анимации, вы можете получить к ним доступ через иерархию экземпляров и при необходимости подключить AnimationComponent. Для сложных конфигураций предпочтительнее создавать анимации в редакторе и упаковывать их в ваш основной .bin, или использовать потоковые .bin файлы для их загрузки по мере необходимости.