PolyCSS — это библиотека, которая превращает 3D-модели в настоящие HTML-элементы. Она рендерит файлы форматов OBJ/MTL, GLB и VOX прямо в DOM, используя для трансформации CSS-свойство matrix3d(...). Поддерживает цвета, текстуры, освещение, тени, фигуры и анимацию. Работает с React, Vue и обычным JavaScript.
Установка простая: npm install @layoutit/polycss для vanilla-версии, @layoutit/polycss-react или @layoutit/polycss-vue — для фреймворков. Можно подключить и через CDN.
Сцена строится из кастомных элементов. <PolyCamera> задаёт точку обзора, rotX и rotY управляют углом поворота в градусах, zoom — масштабом, target — смещением камеры, distance — отдалением. По умолчанию камера ортографическая, но <PolyPerspectiveCamera> добавляет перспективу. <PolyScene> управляет освещением (directionalLight, ambientLight) и параметрами текстурных атласов (textureLighting, textureQuality). <PolyMesh> загружает модели: src принимает .obj, .gltf, .glb или .vox, а mtl — файл материалов. Есть поддержка meshResolution (lossy или lossless) и castShadow для динамических теней.
Элементы управления: <PolyOrbitControls> — орбита с drag, shift-drag для панорамирования, колёсико для зума и авто-вращение. <PolyMapControls> имитирует карты (панорамирование первым), <PolyFirstPersonControls> — управление от первого лица с клавиатурой и pointer-lock, а <PolyTransformControls> добавляет gizmo для перемещения и вращения выбранных мешей.
Можно рендерить полигоны напрямую — это удобно, если нужны per-face события DOM или кастомные стили. Каждый полигон — это объект с массивом vertices, color или texture и uvs. Их можно передать в <Poly> внутри сцены. Для загрузки в императивном стиле есть функция loadMesh(): она парсит файлы и возвращает объект, который добавляется в сцену методом add().
PolyCSS умеет экспортировать снимок сцены в отдельный HTML-документ без рантайма. Функция exportPolySceneSnapshot(target) клонирует DOM сцены, встраивает только нужные стили, преобразует картинки в data:image/...;base64,... и убирает скрипты. Если какой-то ассет не встроился, выбрасывается PolySceneSnapshotError с кодом ASSET_INLINE_FAILED.
Рендеринг идёт через DOM, поэтому производительность упирается в количество элементов на странице и площадь текстурного атласа. Каждый видимый полигон — один листовой элемент. Движок выбирает самый лёгкий CSS-примитив для его отображения: <b> для простых прямоугольников, <u> для треугольников (через corner-shape или border-width), <i> для сложных многоугольников (с поддержкой border-shape: polygon(...)), <s> — для текстурированных фрагментов как запасной вариант.
Библиотека разбита на пакеты: @layoutit/polycss-core (чистая математика, парсеры, без браузерных глобал), @layoutit/polycss (vanilla-компоненты), @layoutit/polycss-react и @layoutit/polycss-vue. Лицензия MIT.