>
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.
[ 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.
<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>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。