PolyCSS - CSS 3D Engine for the DOM

Render textured 3D meshes in the DOM with CSS.<br>No WebGL or needed: each polygon is a real DOM element.

Supports OBJ, glTF, GLB, and MagicaVoxel VOX files, including<br>UV textures and material colors. Works with vanilla JS, React,<br>and Vue.

View on GitHub ★ …

Package managers<br>npm install @layoutit/polycssnpm install @layoutit/polycss-reactnpm install @layoutit/polycss-vue

CDN<br>script type="module" src="https://esm.sh/@layoutit/polycss/elements">script>

How It Works

PolyCSS loads OBJ, glTF, GLB, and VOX mesh files. Each polygon<br>becomes a DOM element positioned with transform: matrix3d(...).<br>UV-textured triangles are packed into generated atlas sprites with<br>CSS background positioning. The browser's compositor handles the<br>3D layering.

The rendered scene is a tree of standard DOM elements: no shadow<br>DOM, no WebGL context, no canvas-as-the-whole-scene. Every polygon<br>is individually addressable: attach click handlers, apply CSS<br>classes, animate with CSS transitions.

View Usage Guidelines "

PolyCSS provides custom elements (, , ), an imperative createPolyCamera / createPolyScene API, and optional React / Vue bindings. Each polygon in the mesh becomes a DOM element you can style and interact with: use whichever entry point fits your stack.

vanilla js React Vue<br>script type="module" src="https://esm.sh/@layoutit/polycss/elements">script>

poly-camera rot-x="65" rot-y="45"><br>poly-scene><br>poly-orbit-controls drag wheel animate-speed="0.3">poly-orbit-controls><br>poly-icosahedron size="100" color="#ff6644">poly-icosahedron><br>poly-scene><br>poly-camera>import { PolyCamera, PolyScene, PolyOrbitControls, PolyIcosahedron } from "@layoutit/polycss-react";

export function App() {<br>return (<br>PolyCamera rotX={65} rotY={45}><br>PolyScene><br>PolyOrbitControls drag wheel animate={{ speed: 0.3 }} /><br>PolyIcosahedron size={100} color="#ff6644" /><br>PolyScene><br>PolyCamera><br>);<br>}template><br>PolyCamera :rot-x="65" :rot-y="45"><br>PolyScene><br>PolyOrbitControls drag wheel :animate="{ speed: 0.3 }" /><br>PolyIcosahedron :size="100" color="#ff6644" /><br>PolyScene><br>PolyCamera><br>template><br>script setup lang="ts"><br>import { PolyCamera, PolyScene, PolyOrbitControls, PolyIcosahedron } from "@layoutit/polycss-vue";<br>script><br>Browse API Reference "