Компонент gltf-model

Компонент gltf-model в A-Frame используется для загрузки и отображения 3D-моделей в формате GLTF или GLB. Он является ключевым инструментом для интеграции готовых моделей в сцены виртуальной и дополненной реальности. Формат GLTF (GL Transmission Format) оптимизирован для веба: он поддерживает материалы PBR, анимации, текстуры и сложные иерархии объектов, что делает его стандартом де-факто для веб-3D.

Синтаксис базового использования:

<a-entity gltf-model="#model"></a-entity>

Здесь #model — это идентификатор ресурса, определённого через тег <a-asset-item>:

<a-assets>
  <a-asset-item id="model" src="models/car.glb"></a-asset-item>
</a-assets>

gltf-model автоматически загружает модель и добавляет её в сцену как дочерний объект THREE.Group внутри сущности A-Frame.

Атрибуты и параметры компонента

1. src Основной атрибут, указывающий путь к файлу модели. Поддерживаются локальные и удалённые ресурсы:

<a-entity gltf-model="src: url(models/house.glb)"></a-entity>

2. draco-compression Используется для декодирования моделей, сжатых через Draco. Пример:

<a-entity gltf-model="src: url(model-draco.glb); draco-compression: true"></a-entity>

Необходимо подключать декодер Draco через <script>.

3. animation-mixer Позволяет проигрывать анимации, встроенные в модель. Атрибут принимает параметры для управления действиями и скоростью воспроизведения:

<a-entity gltf-model="#animatedModel" animation-mixer="clip: Run; loop: repeat"></a-entity>

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

Компонент gltf-model генерирует ряд событий:

  • model-loaded — срабатывает после полной загрузки модели и её интеграции в сцену.
  • model-error — вызывается при ошибке загрузки.
  • model-progress — предоставляет данные о прогрессе загрузки, полезно для отображения индикаторов.

Пример подписки на событие:

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

Работа с материалами и текстурами

После загрузки модели можно управлять её материалами через компонент material или напрямую через объект THREE:

entity.addEventListener('model-loaded', () => {
  const mesh = entity.getObject3D('mesh');
  if (mesh) {
    mesh.traverse((node) => {
      if (node.isMesh) {
        node.material.color.set('red');
      }
    });
  }
});

Метод traverse позволяет проходить по всем дочерним мешам модели, что особенно важно для сложных GLTF-сцен с несколькими материалами.

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

Модели GLTF могут быть тяжелыми, поэтому рекомендуется:

  • Использовать Draco-сжатие для уменьшения размера файлов.
  • Минимизировать количество полигонов.
  • Сжимать текстуры до форматов, поддерживаемых вебом (JPEG, PNG, Basis).
  • Загружать модели асинхронно через <a-assets> для кэширования и предотвращения “подвисаний” сцены.

Примеры сложных сценариев

1. Динамическая подгрузка модели по URL:

const entity = document.createElement('a-entity');
entity.setAttribute('gltf-model', 'url(https://example.com/models/robot.glb)');
document.querySelector('a-scene').appendChild(entity);

2. Анимация с несколькими клипами:

<a-entity gltf-model="#character" animation-mixer="clip: Walk; loop: repeat">
</a-entity>
<a-entity gltf-model="#character" animation-mixer="clip: Jump; loop: once">
</a-entity>

3. Смешивание материалов после загрузки:

entity.addEventListener('model-loaded', () => {
  const mesh = entity.getObject3D('mesh');
  mesh.traverse((node) => {
    if (node.isMesh) {
      node.material.emissiveIntensity = 0.5;
      node.material.roughness = 0.8;
    }
  });
});

Интеграция с другими компонентами A-Frame

gltf-model часто используется совместно с:

  • animation-mixer для анимаций персонажей.
  • physics-body и dynamic-body (из aframe-physics-system) для физического взаимодействия.
  • cursor и raycaster для интерактивности с 3D-объектами.

Сценарии могут включать игровые объекты, архитектурные визуализации, VR-презентации и обучающие симуляторы, где GLTF обеспечивает высокое качество рендеринга при сравнительно лёгком весе файла.

Хотя компонент gltf-model выглядит просто, глубокое понимание его событийной системы, структуры загружаемых объектов и взаимодействия с другими компонентами позволяет создавать динамичные и оптимизированные 3D-сцены в браузере.

Оглавление