Status: pre-1.0. APIs may still change before a stable 1.0 release.

@glyphcss/vue

Native Vue 3 components for glyphcss — an ASCII polygon mesh renderer that projects 3D scenes into a single <pre> element. Loads OBJ, glTF, GLB, and MagicaVoxel .vox files; renders the result as monospace text in the browser.

Install

npm install @glyphcss/vue

Requires Vue 3 as a peer dependency.

Quickstart

<template>
  <GlyphCamera>
    <GlyphScene :cols="80" :rows="40">
      <GlyphOrbitControls />
      <GlyphMesh src="/cottage.glb" />
    </GlyphScene>
  </GlyphCamera>
</template>

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

Component reference

<GlyphCamera> / <GlyphOrthographicCamera>

Orthographic camera. GlyphCamera is the ergonomic default alias. Wraps <GlyphScene> — the camera is always the outermost element.

| Prop | Type | Default | Description | |---|---|---|---| | rot-x | number | 65 | Tilt in degrees | | rot-y | number | 45 | Azimuth in degrees | | zoom | number | 0.65 | CSS pixels per world unit |

<GlyphPerspectiveCamera>

Perspective (foreshortened) camera. Required for <GlyphFirstPersonControls>.

| Prop | Type | Default | Description | |---|---|---|---| | rot-x | number | 65 | Tilt in degrees | | rot-y | number | 45 | Azimuth in degrees | | distance | number | 0 | Perspective pull-back; CSS pixels with CSS perspective, world units only in legacy perspective="0" mode | | zoom | number | 0.65 | CSS pixels per world unit |

<GlyphScene>

Root of every Vue glyphcss render tree. Owns the <pre> output element and rasterizes all meshes on camera or state change. Must be a child of a camera component.

| Prop | Type | Default | Description | |---|---|---|---| | cols | number | 80 | Grid width in character cells | | rows | number | 40 | Grid height in character cells | | mode | "wireframe" \| "solid" \| "voxel" | "solid" | Render mode |

<GlyphMesh>

Loads and displays a 3D mesh. Supports .obj, .glb, .gltf, .vox.

| Prop | Type | Description | |---|---|---| | src | string | URL of the mesh file | | color | string | Override mesh color |

<GlyphOrbitControls> / <GlyphMapControls>

Mouse/touch/keyboard camera controls.

Composables

• useGlyphCamera() — access the camera context
• useGlyphSceneContext() — access scene state
• useGlyphAnimation(clips, controller) — three.js-style animation mixer

License

MIT