CSS3DRenderer: DOM-элементы в 3D-пространстве

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

Основная идея CSS3DRenderer — применение к DOM-элементам трёхмерных матриц трансформации, соответствующих положению и ориентации объектов в сцене Three.js.

Создание рендерера и сцены

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;

const renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Ключевые моменты:

  • CSS3DRenderer создаёт контейнер div (renderer.domElement), в котором размещаются все DOM-объекты сцены.
  • Размер и позиция рендерера на странице управляются через стандартные CSS-свойства.
  • Камера (PerspectiveCamera или OrthographicCamera) влияет на видимую перспективу, аналогично WebGL-сцене.

Создание CSS3D-объектов

Для отображения DOM-элементов используется класс CSS3DObject, который оборачивает любой HTML-элемент.

const element = document.createElement('div');
element.style.width = '200px';
element.style.height = '200px';
element.style.background = 'rgba(255,0,0,0.5)';
element.innerHTML = '3D DIV';

const cssObject = new THREE.CSS3DObject(element);
cssObject.position.set(0, 0, 0);
scene.add(cssObject);

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

  • Любой HTML-элемент может быть преобразован в 3D-объект.
  • Свойства position, rotation, scale работают так же, как и для Mesh в WebGL.
  • Поддерживаются иерархии: CSS3DObject можно добавлять в группы и родительские объекты, создавая сложные структуры.

Анимация и взаимодействие

Анимация DOM-элементов в 3D полностью синхронизируется с Three.js:

function animate() {
    requestAnimationFrame(animate);
    cssObject.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();
  • Изменение позиции и вращения объекта напрямую обновляет его визуальное представление на странице.
  • Можно использовать любые библиотеки анимации, совместимые с CSS и JS, например, GSAP для плавных трансформаций.

Стилизация и эффекты

Преимущество CSS3DRenderer — использование стандартного CSS для визуального оформления.

  • Фоны и границы: любые CSS-свойства background, border, box-shadow.
  • Текст и шрифты: поддерживаются веб-шрифты, text-shadow, line-height.
  • Переходы и анимации: CSS-анимации и transitions можно комбинировать с трёхмерными движениями.
div {
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: transform 0.5s ease;
}
  • CSS3DRenderer автоматически применяет матрицу трансформации к transform элемента, поэтому все CSS-эффекты накладываются поверх 3D-трансформаций.

Работа с несколькими объектами и группами

const group = new THREE.Group();

const object1 = new THREE.CSS3DObject(document.createElement('div'));
const object2 = new THREE.CSS3DObject(document.createElement('div'));

group.add(object1, object2);
scene.add(group);
  • Группы позволяют управлять сразу несколькими объектами, изменяя их общую позицию, вращение или масштаб.
  • Поддерживаются вложенные группы, что облегчает создание сложных интерфейсов и сцен с множеством элементов.

Сочетание с WebGLRenderer

Одна из мощных особенностей CSS3DRenderer — возможность интеграции с WebGL-рендерером. Часто используют такой подход для комбинирования 3D-геометрии и DOM-элементов:

const webglRenderer = new THREE.WebGLRenderer({ alpha: true });
webglRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(webglRenderer.domElement);

function animate() {
    requestAnimationFrame(animate);
    webglRenderer.render(scene, camera);
    cssRenderer.render(scene, camera);
}
animate();
  • CSS3DRenderer поверх WebGL позволяет создавать гибридные интерфейсы, где DOM-элементы движутся вместе с 3D-объектами.
  • Такой подход применяется для панорамных интерфейсов, интерактивных меню и 3D-презентаций контента.

Ограничения CSS3DRenderer

  • Не поддерживает затенение, освещение и материалы WebGL.
  • Производительность зависит от количества DOM-элементов и возможностей браузера.
  • Сложные сцены с тысячами элементов могут работать медленно, особенно на мобильных устройствах.

Оптимизация достигается за счёт уменьшения числа элементов, объединения объектов в группы и использования CSS-анимаций вместо частого обновления JavaScript.

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

  • Позиционирование: всегда использовать position: absolute для DOM-элементов внутри CSS3DRenderer.
  • События: события мыши и касания работают напрямую с DOM-элементами, что облегчает взаимодействие.
  • Резиновая верстка: рендерер хорошо сочетается с адаптивными интерфейсами, можно комбинировать 3D с flex и grid.
  • Комбинация с библиотеками: интеграция с GSAP, Anime.js, или библиотеками интерфейса для плавной анимации и интерактивности.

CSS3DRenderer открывает возможности для создания гибридных интерфейсов, где веб-страница и трёхмерное пространство работают как единое целое, обеспечивая интерактивность и визуальную выразительность без необходимости полного перехода на WebGL.

Оглавление