GlyphCamera

<GlyphCamera> (alias for <GlyphOrthographicCamera>) is the outermost element in a glyphcss tree. Wrap <GlyphScene> inside it. The renderer and the hit layer both read from the same camera state — mutating rotY updates both simultaneously.

Props — orthographic (GlyphCamera / GlyphOrthographicCamera)

Prop	Type	Default	Description
rotX	number (degrees)	0	Tilt around X axis
rotY	number (degrees)	0	Spin around Y axis
zoom	number	50	Camera zoom — pixels per world unit (zoom=50 → 50 px per world unit at BASE_TILE)

Props — perspective (GlyphPerspectiveCamera)

Prop	Type	Default	Description
rotX	number (degrees)	0	Tilt around X axis
rotY	number (degrees)	0	Spin around Y axis
zoom	number	50	Camera zoom — pixels per world unit (zoom=50 → 50 px per world unit at BASE_TILE)
distance	number	3	Camera distance — smaller = more perspective foreshortening
stretch	number	1.0	Extra X scale on top of cellAspect

Full examples

React

import {
  GlyphPerspectiveCamera,
  GlyphOrthographicCamera,
  GlyphScene,
  GlyphMesh,
  GlyphOrbitControls,
} from "@glyphcss/react";
import { octahedronPolygons } from "@glyphcss/core";

const octa = octahedronPolygons({ center: [0, 0, 0], size: 1, color: "#ffcc44" });

// Perspective (foreshortened)
export function PerspectiveExample() {
  return (
    <GlyphPerspectiveCamera rotX={22} zoom={50} distance={3} stretch={0.95}>
      <GlyphScene mode="solid" cols={100} rows={30}>
        <GlyphOrbitControls />
        <GlyphMesh polygons={octa} />
      </GlyphScene>
    </GlyphPerspectiveCamera>
  );
}

// Orthographic — parallel lines stay parallel (isometric style)
export function OrthoExample() {
  return (
    <GlyphOrthographicCamera rotX={35} zoom={50}>
      <GlyphScene mode="solid" cols={100} rows={30}>
        <GlyphOrbitControls />
        <GlyphMesh polygons={octa} />
      </GlyphScene>
    </GlyphOrthographicCamera>
  );
}

Vue

<template>
  <component
    :is="perspective ? GlyphPerspectiveCamera : GlyphOrthographicCamera"
    :rot-x="perspective ? 22 : 35"
    :zoom="50"
    v-bind="perspective ? { distance: 3 } : {}"
  >
    <GlyphScene mode="solid" :cols="100" :rows="30">
      <GlyphOrbitControls />
      <GlyphMesh :polygons="octa" />
    </GlyphScene>
  </component>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  GlyphPerspectiveCamera,
  GlyphOrthographicCamera,
  GlyphScene,
  GlyphMesh,
  GlyphOrbitControls,
} from "@glyphcss/vue";
import { octahedronPolygons } from "@glyphcss/core";

const perspective = ref(true);
const octa = octahedronPolygons({ center: [0, 0, 0], size: 1, color: "#ffcc44" });
</script>

Vanilla JS

import {
  createGlyphPerspectiveCamera,
  createGlyphOrthographicCamera,
  createGlyphScene,
} from "glyphcss";
import { octahedronPolygons } from "@glyphcss/core";

const host = document.querySelector<HTMLElement>("#scene")!;

// Camera constructed first, then passed into the scene
const perspective = createGlyphPerspectiveCamera({
  rotX: 22,
  zoom: 50,
  distance: 3,
  stretch: 0.95,
});
const scene = createGlyphScene(host, { camera: perspective, mode: "solid" });

scene.add(octahedronPolygons({ center: [0, 0, 0], size: 1, color: "#ffcc44" }));

// Switch to orthographic:
const ortho = createGlyphOrthographicCamera({ rotX: 35, zoom: 50 });
scene.setOptions({ camera: ortho });

// Mutate camera state and re-render:
perspective.rotY = 45;
perspective.distance = 4;
scene.rerender();

Notes

• Distance ranges that work well: 1.6 (strong perspective) → 5.0 (nearly flat).
• rotX: 0 looks straight down the Z axis. Try 22 (degrees) for a slight downward tilt that gives the mesh visual weight.
• stretch: 0.95 counteracts over-stretching from cellAspect ≈ 2 on typical monospace fonts. Leave at 1.0 if you tighten line-height instead.
• Orthographic cameras ignore distance — use zoom to scale the mesh instead.
• GlyphCamera is the ergonomic default alias for GlyphOrthographicCamera. Use it for iso/diagrammatic scenes; use GlyphPerspectiveCamera explicitly for character or walkthrough scenes.
• Rotation units are degrees, matching voxcss/three.js. rotX=65, rotY=45 is the classic isometric-ish viewpoint. zoom is pixels per world unit — zoom=50 means one world unit maps to 50 px.