Компонент text

Компонент text является основным инструментом для отображения текста в сценах A-Frame. Он предоставляет гибкие возможности управления визуальными параметрами, позиционированием, стилизацией и интеграцией текста с 3D-объектами.

Основная структура компонента

<a-entity text="value: Привет, мир!; color: #FFF; align: center"></a-entity>
  • value – текст, который будет отображаться. Может содержать переносы строк с использованием \n.
  • color – цвет текста в формате HEX, RGB или CSS-цвета. Например, color: red или color: #00FF00.
  • align – выравнивание текста относительно центра, доступные значения: left, center, right.
  • width – максимальная ширина текста. Если текст превышает указанную ширину, строки автоматически переносятся.
  • wrap-count – альтернатива width, указывающая количество символов в строке до переноса.
  • baseline – вертикальное выравнивание текста: top, center, bottom.
  • anchor – точка привязки текста к объекту, значения: left, center, right.

Шрифты и стили

Компонент text поддерживает пользовательские шрифты в формате .fnt и .png, которые создаются с помощью инструментов типа BMFont. Настройка шрифта осуществляется через атрибут font:

<a-entity text="value: Пример; font: url(/fonts/Roboto-msdf.json)"></a-entity>
  • font – путь к JSON-файлу шрифта.
  • letter-spacing – расстояние между символами. Может быть положительным или отрицательным числом.
  • line-height – расстояние между строками текста. Позволяет регулировать плотность вертикального интервала.
  • opacity – прозрачность текста, значение от 0.0 до 1.0.

Динамическое обновление текста

Компонент text можно изменять динамически с помощью JavaScript. Для этого используется метод setAttribute:

const textEntity = document.querySelector('#myText');
textEntity.setAttribute('text', 'value', 'Новый текст');
textEntity.setAttribute('text', 'color', '#FF0000');

Также можно управлять отдельными свойствами:

textEntity.setAttribute('text', {value: 'Обновление', align: 'right'});

3D-позиционирование и масштабирование

Текст в A-Frame является объектом 3D-сцены, поэтому его можно масштабировать и позиционировать:

<a-entity text="value: 3D Текст; color: #0F0" position="1 2 -3" rotation="0 45 0" scale="2 2 2"></a-entity>
  • position – координаты в пространстве сцены.
  • rotation – поворот объекта по осям X, Y, Z.
  • scale – масштабирование текста по осям X, Y, Z.

Тени и контуры

Для улучшения читаемости текста на сложном фоне используются свойства shader и outlineWidth:

<a-entity text="value: Контурный текст; color: #FFF; shader: msdf; outlineColor: #000; outlineWidth: 0.05"></a-entity>
  • shader – рендеринг текста, чаще всего используется msdf для качественного сглаживания.
  • outlineColor – цвет контура.
  • outlineWidth – ширина контура. Позволяет сделать текст более заметным на ярком фоне.

Многострочный текст

Многострочный текст формируется с помощью \n:

<a-entity text="value: Первая строка\nВторая строка\nТретья строка; align: left"></a-entity>

Для автоматического переноса строк можно использовать wrapCount или ограничивать ширину width:

<a-entity text="value: Длинный текст для переноса; width: 2"></a-entity>

Интерактивные эффекты

Текст можно использовать как интерактивный элемент, реагирующий на события A-Frame:

<a-entity text="value: Нажми меня" id="interactiveText" position="0 1.5 -2"></a-entity>

<script>
  const textEntity = document.querySelector('#interactiveText');
  textEntity.addEventListener('click', () => {
    textEntity.setAttribute('text', 'color', '#FF0');
    textEntity.setAttribute('text', 'value', 'Клик зафиксирован');
  });
</script>

Поддерживаются события mouseenter, mouseleave, click и другие, что позволяет создавать интерактивные панели и HUD-интерфейсы.

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

  • Для большого количества текста рекомендуется использовать bitmap-шрифты (msdf) вместо стандартных шрифтов браузера.
  • Обновление текста на каждом кадре снижает производительность, поэтому следует изменять текст только при необходимости.
  • Текстовые объекты можно объединять в одну сцену с mergeMeshes, если они статические, чтобы снизить нагрузку на рендеринг.

Дополнительные свойства

  • tabSize – размер табуляции в символах.
  • whiteSpace – управление переносами: normal, pre, nowrap.
  • baseline – вертикальная привязка текста относительно позиции объекта.
  • lineHeight – контроль расстояния между строками.
  • letterSpacing – межбуквенный интервал.

Использование всех этих параметров позволяет создавать сложные и визуально привлекательные тексты для VR-сцен, интегрируемые с анимацией, интерактивными элементами и другими компонентами A-Frame.

Оглавление