PolyCSS es una biblioteca de JavaScript que funciona como motor 3D para el DOM: renderiza mallas poligonales como elementos HTML reales transformados con la función CSS matrix3d(). El proyecto, desarrollado por LayoutitStudio bajo licencia MIT, se distribuye en cuatro paquetes npm: @layoutit/polycss-core, con el núcleo matemático, los parsers y los helpers de iluminación y cámara; @layoutit/polycss, para uso en JavaScript vanilla mediante custom elements; y dos adaptadores oficiales para React y Vue 3.
La biblioteca carga modelos en formatos OBJ/MTL (con texturas map_Kd y coordenadas UV), glTF/GLB (incluyendo imágenes embebidas y TEXCOORD_0) y MagicaVoxel .vox, y genera primitivas como cajas, planos, anillos, esferas, toros, cilindros, conos y sólidos platónicos. La API de alto nivel se articula en torno a (ángulo de órbita, zoom, paneo y distancia), (iluminación y opciones de atlas) y (carga o recepción de la geometría). Incluye además controles de interacción: orbit con arrastre, pan con shift+arrastre, zoom con rueda, navegación en primera persona y gizmos de transformación.
PolyCSS resulta útil cuando se necesita integrar gráficos 3D en interfaces web sin recurrir a WebGL, mantener cada polígono como nodo DOM individual para asociarle eventos onClick o estilos CSS por cara, o exportar escenas como documentos HTML autónomos. La función exportPolySceneSnapshot clona el DOM renderizado, inyecta solo el CSS necesario, inlinea los activos como data:image/...;base64 y elimina scripts y manejadores de eventos, devolviendo un HTML portable sin dependencias del runtime.
El rendimiento depende del número de elementos hoja montados y del área del atlas de texturas. El renderizador escoge la primitiva CSS más barata por polígono: con background: currentColor para rectángulos sólidos, con corner-shape para triángulos estables, con border-shape para polígonos sólidos cuando el navegador lo soporta, y con porciones del atlas para geometría texturizada o de alta complejidad. Entre sus limitaciones, el enfoque DOM no compite con WebGL en escenas con decenas de miles de polígonos, y depende del soporte del navegador para corner-shape y border-shape; alternativas como three.js o Babylon.js siguen siendo más adecuadas para visualización 3D intensiva.