@glyphcss/vue

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, STL, and MagicaVoxel .vox files; renders the result as monospace text in the browser.

Full documentation: https://glyphcss.com

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.

<GlyphPerspectiveCamera>

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

<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.

<GlyphMesh>

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

<GlyphOrbitControls> / <GlyphMapControls>

Mouse/touch/keyboard camera controls.

Composables

• useGlyphCamera() — access the camera context
• useGlyphSceneContext() — access scene state
• useGlyphMesh(polygons, options?) — register polygon data as a mesh
• useGlyphAnimation(clips, controller) — three.js-style animation mixer

License

MIT