Управление событиями загрузки

A-Frame предоставляет удобный механизм для обработки событий, связанных с загрузкой сцены и компонентов. События загрузки позволяют точно управлять моментом, когда объекты готовы к отображению и взаимодействию. Это особенно важно для сложных сцен с большим количеством ресурсов: моделей, текстур, аудио и видео.

События сцены

События на уровне сцены обеспечивают контроль над всеми объектами в сцене. Основные события:

  • loaded – возникает, когда сцена полностью инициализирована и все дочерние элементы загружены. Обычно используется для запуска анимаций, активации пользовательского интерфейса или запуска логики игры.

    const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('loaded', () => {
    console.log('Сцена полностью загружена');
});

  • render-target-loaded – активируется, когда WebGL-рендеринг сцены готов. Полезно для оптимизации, если требуется дождаться готовности графического контекста перед рендерингом динамических объектов.

События компонентов и сущностей

Каждая сущность (a-entity) может генерировать собственные события загрузки компонентов. Наиболее часто используемые:

  • model-loaded – генерируется для сущности <a-asset-item> или <a-entity> с компонентом gltf-model после полной загрузки 3D-модели.

    const modelEl = document.querySelector('#myModel');
modelEl.addEventListener('model-loaded', () => {
    console.log('3D-модель загружена');
});

  • materialtextureloaded – событие, возникающее после загрузки текстуры в компоненте material. Позволяет безопасно применять эффекты освещения или фильтры после того, как изображение стало доступно.

  • loadeddata и canplay – события для аудио- и видеокомпонентов, аналогичные стандартным DOM-событиям. Они гарантируют, что медиа-ресурс готов к воспроизведению.

Работа с <a-assets> и управление ресурсами

Компонент <a-assets> предоставляет централизованное управление всеми внешними ресурсами сцены: текстурами, моделями, аудио. Загрузка ресурсов через <a-assets> обеспечивает последовательность и предсказуемость:

<a-assets>
  <a-asset-item id="treeModel" src="models/tree.gltf"></a-asset-item>
  <img id="groundTexture" src="textures/ground.jpg">
  <audio id="backgroundMusic" src="audio/music.mp3"></audio>
</a-assets>

Для отслеживания загрузки всех ресурсов используется событие loaded на <a-assets>:

const assets = document.querySelector('a-assets');
assets.addEventListener('loaded', () => {
    console.log('Все ресурсы загружены');
});

Использование <a-assets> предотвращает визуальные «мигания» или появление объектов без текстур, так как сцена ждёт полной готовности всех ресурсов.

Отложенная инициализация сущностей

Иногда требуется инициализация сущности только после загрузки конкретной модели или текстуры. Это достигается через цепочку событий:

const modelEl = document.querySelector('#myModel');
modelEl.addEventListener('model-loaded', () => {
    modelEl.setAttribute('animation', 'property: rotation; to: 0 360 0; loop: true; dur: 5000');
});

Такой подход гарантирует, что анимация не начнётся до появления модели, предотвращая ошибки и некорректное отображение сцены.

Обработка ошибок загрузки

A-Frame поддерживает стандартные DOM-события ошибок, что позволяет отслеживать сбои:

  • error – событие для <a-asset-item>, <img>, <audio> и <video>.

    const modelEl = document.querySelector('#myModel');
modelEl.addEventListener('error', (evt) => {
    console.error('Ошибка загрузки модели', evt.detail.src);
});

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

Совмещение событий и асинхронной логики

События загрузки легко интегрируются с промисами и async/await через обёртки:

function waitForModelLoad(modelEl) {
    return new Promise((resolve, reject) => {
        modelEl.addEventListener('model-loaded', () => resolve(modelEl));
        modelEl.addEventListener('error', reject);
    });
}

(async () => {
    const model = document.querySelector('#myModel');
    try {
        await waitForModelLoad(model);
        console.log('Модель готова к использованию');
    } catch (e) {
        console.error('Ошибка загрузки модели', e);
    }
})();

Это позволяет строить последовательную загрузку сцен, где каждая сущность и ресурс активируются строго после готовности предыдущих.

Рекомендации по производительности

  • Разделять ресурсы по <a-assets> для моделей, текстур и медиа.
  • Минимизировать количество слушателей loaded на уровне сцены, используя делегирование.
  • Использовать события model-loaded и materialtextureloaded для постепенного появления элементов и анимаций.
  • Для больших сцен применять visible: false до полной загрузки объектов, чтобы избежать мерцания.

Особенности работы с динамическими ресурсами

При добавлении сущностей через JavaScript события загрузки работают одинаково. Например:

const entity = document.createElement('a-entity');
entity.setAttribute('gltf-model', '#treeModel');
entity.addEventListener('model-loaded', () => {
    console.log('Динамически добавленная модель загружена');
});
document.querySelector('a-scene').appendChild(entity);

Это позволяет динамически формировать сцены без риска, что объекты отобразятся до загрузки ресурсов.

Контроль событий загрузки в A-Frame обеспечивает надежность сцены, предотвращает визуальные ошибки и даёт полный контроль над последовательностью инициализации компонентов. Сочетание <a-assets>, событий сущностей и асинхронной логики создаёт гибкую систему управления ресурсами в 3D-пространстве.

Оглавление