glyphcss: ASCII polygon-mesh renderer for the DOM + sparse DOM hit layer — inspect every hotspot in DevTools, attach onClick to any 3D anchor, with zero polygon-per-node overhead."> + sparse DOM hit layer — inspect every hotspot in DevTools, attach onClick to any 3D anchor, with zero polygon-per-node overhead."> + sparse DOM hit layer — inspect every hotspot in DevTools, attach onClick to any 3D anchor, with zero polygon-per-node overhead.">

[glyphcss] _

Loading…

glyphcss<br>Render textured 3D meshes in the DOM with ASCII.<br>No WebGL. No . Each scene is a single<br>you can inspect, hover, and click.

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

[ View on GitHub ★ … ]<br>[ Browse gallery ]<br>runtimes: vanilla js react vue

[ INSTALLATION ]<br>┌─ package managers ─┐<br>terminal<br>$ npm install glyphcss<br>terminal<br>$ npm install @glyphcss/react<br>terminal<br>$ npm install @glyphcss/vue

┌─ cdn ─┐<br>index.html<br>script type="module" src="https://esm.sh/glyphcss/elements">script>

[ HOW IT WORKS ]

glyphcss loads OBJ, glTF, GLB, STL, and VOX mesh files. Each scene<br>renders into a single : the rasteriser<br>projects every polygon, fills a cols × rows character<br>grid, and writes one string to textContent per render.<br>There are no per-polygon DOM nodes and no matrix3d.

Interactivity is opt-in and sparse: drop a<br>at any 3D anchor and glyphcss emits one absolutely-positioned<br>over the projected cell. Real DOM events,<br>real :hover styles, real role="button"<br>accessibility — without one DOM node per polygon.

[ → core concepts ]

[ HELLO WORLD ]<br>glyphcss provides custom elements (, ),<br>an imperative createGlyphScene API, and optional React / Vue bindings.<br>Use whichever entry point fits your stack.

~/project/ vanilla js React Vue

script type="module" src="https://esm.sh/glyphcss/elements">script>

glyph-camera rot-x="23" zoom="1.3"><br>glyph-scene><br>glyph-orbit-controls drag wheel>glyph-orbit-controls><br>glyph-mesh geometry="dodecahedron"><br>glyph-hotspot at="0,1,0">glyph-hotspot><br>glyph-mesh><br>glyph-scene><br>glyph-camera>import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/react";

export function App() {<br>return (<br>GlyphCamera rotX={23} zoom={1.3}><br>GlyphScene><br>GlyphOrbitControls drag wheel /><br>GlyphMesh geometry="dodecahedron"><br>GlyphHotspot at={[0, 1.2, 0]} onClick={() => alert("vertex")} /><br>GlyphMesh><br>GlyphScene><br>GlyphCamera><br>);<br>}template><br>GlyphCamera :rot-x="23" :zoom="1.3"><br>GlyphScene><br>GlyphOrbitControls drag wheel /><br>GlyphMesh geometry="dodecahedron"><br>GlyphHotspot :at="[0, 1.2, 0]" @click="onVertex" /><br>GlyphMesh><br>GlyphScene><br>GlyphCamera><br>template><br>script setup lang="ts"><br>import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/vue";<br>function onVertex() { alert("vertex"); }<br>script><br>[ → api reference ]