Render textured 3D meshes in the DOM. No WebGL, no canvas-as-scene. Each polygon is a real DOM element — style it with CSS, click it, inspect it in DevTools.
Loads OBJ, glTF, and GLB. UV-textured triangles rasterized via
offscreen canvas. DOM tree of <img> and
<svg> elements positioned with
transform: matrix3d(...).
Installation
Package managers
npm install polycssnpm install @polycss/reactnpm install @polycss/vueCDN
<script type="module" src="https://esm.sh/polycss/elements"></script>How It Works
polycss loads OBJ, glTF, and GLB mesh files. Each triangle becomes
one <img> element positioned with
transform: matrix3d(...). UV-textured triangles are
rasterized once via an offscreen canvas; the blob URL is the image
source. The browser's compositor handles the 3D layering.
The rendered scene is a tree of standard DOM elements — no shadow DOM, no WebGL context, no canvas-as-the-whole-scene. Every polygon is individually addressable: attach click handlers, apply CSS classes, animate with CSS transitions.
Hello World!
polycss provides custom elements (<poly-scene>, <poly-mesh>), an imperative 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.
<script type="module" src="https://esm.sh/polycss/elements"></script>
<poly-scene perspective="1000" rot-x="65" rot-y="45">
<poly-mesh src="/cottage.glb"></poly-mesh>
</poly-scene>