CSS2DRenderer: лейблы и аннотации

CSS2DRenderer — это компонент библиотеки Three.js, предназначенный для отображения HTML-элементов поверх 3D-сцены. В отличие от стандартного рендерера WebGL, CSS2DRenderer использует DOM для рендеринга, что позволяет легко создавать тексты, аннотации и лейблы, которые остаются читаемыми и масштабируемыми при вращении сцены.

Ключевой особенностью является возможность позиционирования элементов в 3D-пространстве, при этом их визуальное отображение управляется CSS. Такой подход облегчает стилизацию текста, иконок или панелей информации без сложного взаимодействия с шейдерами.

Подключение и инициализация

Для использования CSS2DRenderer необходимо подключить соответствующий модуль:

import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';

Создание рендерера осуществляется аналогично WebGLRenderer:

const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement);

Важно выставить position: absolute и привязать элемент к body или контейнеру сцены, чтобы лейблы отображались поверх WebGL-канвы.

Создание лейблов и аннотаций

Лейбл представляет собой HTML-элемент, обернутый в CSS2DObject:

const div = document.createElement('div');
div.className = 'label';
div.textContent = 'Точка интереса';
div.style.marginTop = '-1em';
const label = new CSS2DObject(div);
label.position.set(1, 2, 3); // позиция в 3D-пространстве
scene.add(label);

Особенности:

  • Позиционирование: label.position задаёт координаты в мировом пространстве, как и для любых объектов Three.js.
  • Стилизация: все CSS-свойства применяются напрямую к элементу div, включая шрифты, цвета, фон, анимацию.
  • Интерактивность: лейблы могут содержать ссылки, кнопки или даже сложные панели с событиями DOM.

Интеграция с основной сценой

Для корректного отображения необходимо обновлять CSS2DRenderer вместе с основным рендерером:

function animate() {
    requestAnimationFrame(animate);

    // обновление анимации объектов сцены
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}

animate();

Важно всегда рендерить WebGLRenderer первым, а затем CSS2DRenderer, чтобы DOM-лейблы корректно накладывались поверх 3D-сцены.

Взаимодействие с камерой и объектами

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

  • Подписи объектов: имена моделей, номера точек.
  • Информационных панелей: отображение данных объекта при наведении.
  • Маршрутов и путевых точек: визуальные индикаторы в 3D-картах или симуляциях.

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

Хотя рендеринг через DOM проще для текстовых аннотаций, он требует аккуратного управления количеством элементов:

  • Ограничивать количество одновременно отображаемых лейблов.
  • Использовать display: none для скрытых объектов.
  • Минимизировать использование тяжелых CSS-анимаций.

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

Примеры стилизации

CSS-класс для лейбла может включать:

.label {
    color: white;
    background-color: rgba(0,0,0,0.5);
    padding: 2px 5px;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    pointer-events: auto; /* позволяет взаимодействовать с элементами */
}

С помощью CSS можно добавлять тени, градиенты, анимацию появления и исчезновения, что делает лейблы не только информативными, но и эстетически привлекательными.

Сочетание с CSS3DRenderer

CSS2DRenderer отлично работает совместно с CSS3DRenderer, позволяя комбинировать плоские аннотации и полноценные 3D-DOM-объекты. При этом 2D-лейблы остаются всегда ориентированными к камере, а 3D-DOM-элементы полностью интегрируются в пространство.

Практические советы

  • Использовать CSS2DRenderer для текста и простых UI-элементов, WebGLRenderer — для графики и сложных объектов.
  • Стараться не перегружать сцену лейблами, чтобы избежать тормозов браузера.
  • Организовывать лейблы в отдельные группы THREE.Group для удобного управления видимостью и позиционированием.

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

Оглавление