Запуск визуального инспектора

A-Frame — это фреймворк на базе JavaScript, предназначенный для создания веб-приложений виртуальной и дополненной реальности. Для начала работы достаточно подключить библиотеку через CDN:

<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

После подключения создаётся базовая сцена с тегом <a-scene>, в которой располагаются все объекты, камеры и источники света.

<a-scene>
  <a-box position="0 1 -5" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="2 1 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Эта структура позволяет визуально ориентироваться в пространстве VR прямо в браузере.

Включение визуального инспектора

A-Frame поставляется с встроенным инспектором сцены, который предоставляет удобный интерфейс для просмотра и редактирования объектов в реальном времени. Для его запуска существует несколько методов:

  1. Комбинация клавиш: нажать Ctrl + Alt + I (или Cmd + Option + I на Mac).
  2. Программный вызов: через JavaScript можно вызвать инспектор методом AFRAME.INSPECTOR.open();.

Пример:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Автоматически открыть инспектор через 2 секунды после загрузки
    setTimeout(() => {
      AFRAME.INSPECTOR.open();
    }, 2000);
  });
</script>

Основные возможности инспектора

Визуальный инспектор предоставляет следующие инструменты:

  • Иерархия объектов: отображает все сущности <a-entity> сцены в виде дерева. Позволяет быстро находить объекты и изменять их свойства.
  • Редактор компонентов: каждый объект состоит из компонентов (например, position, rotation, material). Инспектор позволяет редактировать значения напрямую через поля ввода.
  • Манипуляция объектами в пространстве: инструменты перемещения, вращения и масштабирования позволяют изменять объекты на сцене визуально, не редактируя HTML-код.
  • Сцена в реальном времени: изменения сразу отражаются на сцене, что облегчает процесс прототипирования VR-среды.
  • Запись и экспорт сцены: инспектор позволяет экспортировать сцену в HTML, включая все внесённые изменения.

Навигация по сцене в инспекторе

Инспектор использует стандартные элементы управления:

  • ЛКМ для выбора объекта.
  • Панель инструментов позволяет переключаться между режимами перемещения, вращения и масштабирования.
  • W/A/S/D или стрелки для перемещения камеры внутри сцены.
  • Колёсико мыши для приближения и отдаления.

Выбор объекта автоматически выделяет его в дереве сущностей, что обеспечивает быстрый доступ к компонентам.

Настройка инспектора через код

Инспектор можно интегрировать и настраивать через конфигурацию сцены:

<a-scene inspector="url: https://aframe.io/releases/1.5.0/aframe-inspector.min.js; embedded: true;">
  <a-box position="0 1 -5" color="#4CC3D9"></a-box>
</a-scene>

Ключевые параметры:

  • url — путь к скрипту инспектора.
  • embedded — если true, инспектор открывается внутри сцены, без отдельного окна.
  • enabled — можно включить или отключить инспектор при загрузке.

Полезные приёмы работы

  • Для тестирования сцены на мобильных устройствах инспектор поддерживает touch-управление.
  • С помощью инспектора легко находить проблемы с позиционированием, масштабированием или материалами объектов.
  • Можно копировать значения компонентов из одного объекта в другой, ускоряя процесс повторного использования настроек.

Встроенный инспектор A-Frame значительно ускоряет разработку VR-сцен, позволяя мгновенно видеть результат изменений, не перезагружая страницу и не редактируя вручную HTML-код.

Оглавление