Quickstart

Install

React

npm install @glyphcss/react

Vue

npm install @glyphcss/vue

Vanilla JS

npm install glyphcss

Hello cuboctahedron

React

import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/react";

export function App() {
  return (
    <GlyphCamera rotX={25} zoom={50}>
      <GlyphScene>
        <GlyphOrbitControls drag wheel />
        <GlyphMesh geometry="cuboctahedron">
          <GlyphHotspot id="vertex" at={[1, 0, 0]} onClick={() => alert("vertex")} />
        </GlyphMesh>
      </GlyphScene>
    </GlyphCamera>
  );
}

Vue

<template>
  <GlyphCamera :rot-x="25" :zoom="50">
    <GlyphScene>
      <GlyphOrbitControls drag wheel />
      <GlyphMesh geometry="cuboctahedron">
        <GlyphHotspot id="vertex" :at="[1, 0, 0]" @click="onClick" />
      </GlyphMesh>
    </GlyphScene>
  </GlyphCamera>
</template>

<script setup lang="ts">
import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/vue";
function onClick() { alert("vertex"); }
</script>

Vanilla JS

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

<glyph-camera rot-x="25" zoom="50">
  <glyph-scene>
    <glyph-orbit-controls drag wheel></glyph-orbit-controls>
    <glyph-mesh geometry="cuboctahedron">
      <glyph-hotspot at="1,0,0"></glyph-hotspot>
    </glyph-mesh>
  </glyph-scene>
</glyph-camera>

What you get

• A single <pre> rendered as ASCII glyphs — no canvas, no WebGL.
• Drag-to-orbit and scroll-to-zoom out of the box via <GlyphOrbitControls>.
• One absolutely-positioned <div class="glyph-hotspot"> for each <GlyphHotspot>, re-projected through the same camera each render so it stays glued to the mesh.

Try a Platonic solid

React

import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh } from "@glyphcss/react";
import { icosahedronPolygons } from "@glyphcss/core";

const icosa = icosahedronPolygons({ center: [0, 0, 0], size: 1, color: "#44ffcc" });

export function IcosahedronDemo() {
  return (
    <GlyphCamera rotX={25} zoom={50}>
      <GlyphScene mode="solid">
        <GlyphOrbitControls />
        <GlyphMesh polygons={icosa} />
      </GlyphScene>
    </GlyphCamera>
  );
}

Vue

<template>
  <GlyphCamera :rot-x="25" :zoom="50">
    <GlyphScene mode="solid">
      <GlyphOrbitControls />
      <GlyphMesh :polygons="icosa" />
    </GlyphScene>
  </GlyphCamera>
</template>

<script setup lang="ts">
import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh } from "@glyphcss/vue";
import { icosahedronPolygons } from "@glyphcss/core";

const icosa = icosahedronPolygons({ center: [0, 0, 0], size: 1, color: "#44ffcc" });
</script>

Vanilla JS

import { createGlyphCamera, createGlyphScene } from "glyphcss";
import { icosahedronPolygons } from "@glyphcss/core";

const host = document.querySelector<HTMLElement>("#scene")!;
const camera = createGlyphCamera({ rotX: 25, zoom: 50 });
const scene = createGlyphScene(host, { camera, mode: "solid", cols: 80, rows: 24 });
scene.add(icosahedronPolygons({ center: [0, 0, 0], size: 1, color: "#44ffcc" }));

Next: Core Concepts to understand what’s happening under the hood.