Pangram verdict · v3.3
We believe that this document is a mix of AI-generated, and human-written content
AI likelihood · overall
MixedArticle text · 306 words · 2 segments analyzed
> Render textured 3D meshes in the DOM with ASCII. No WebGL. No <canvas>. Each scene is a single <pre> you can inspect, hover, and click. > Supports OBJ, glTF, GLB, and MagicaVoxel VOX — including UV textures and material colors. Works with vanilla JS, React, and Vue. runtimes: vanilla js react vue [ INSTALLATION ] ┌─ package managers ─┐ terminal $ npm install glyphcss terminal $ npm install @glyphcss/react terminal $ npm install @glyphcss/vue ┌─ cdn ─┐ index.html <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 renders into a single <pre>: the rasteriser projects every polygon, fills a cols × rows character grid, and writes one string to textContent per render. There are no per-polygon DOM nodes and no matrix3d. > Interactivity is opt-in and sparse: drop a <GlyphHotspot> at any 3D anchor and glyphcss emits one absolutely-positioned <div> over the projected cell. Real DOM events, real :hover styles, real role="button" accessibility — without one DOM node per polygon. [ → core concepts ] [ HELLO WORLD ] > glyphcss provides custom elements (<glyph-scene>, <glyph-mesh>), an imperative createGlyphScene API, and optional React / Vue bindings. Use whichever entry point fits your stack. ~/project/ <script type="module" src="https://esm.sh/glyphcss/elements"></script>
<glyph-camera rot-x="23" zoom="1.3"> <glyph-scene> <glyph-orbit-controls drag wheel></glyph-orbit-controls> <glyph-mesh geometry="dodecahedron"> <glyph-hotspot at="0,1,0"></glyph-hotspot> </glyph-mesh>
</glyph-scene> </glyph-camera>import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/react";
export function App() { return ( <GlyphCamera rotX={23} zoom={1.3}> <GlyphScene> <GlyphOrbitControls drag wheel /> <GlyphMesh geometry="dodecahedron"> <GlyphHotspot at={[0, 1.2, 0]} onClick={() => alert("vertex")} /> </GlyphMesh> </GlyphScene> </GlyphCamera> ); }<template> <GlyphCamera :rot-x="23" :zoom="1.3"> <GlyphScene> <GlyphOrbitControls drag wheel /> <GlyphMesh geometry="dodecahedron"> <GlyphHotspot :at="[0, 1.2, 0]" @click="onVertex" /> </GlyphMesh> </GlyphScene> </GlyphCamera> </template> <script setup lang="ts"> import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/vue"; function onVertex() { alert("vertex"); } </script> [ → api reference ]