# GlyphCamera

```ts
import { createGlyphPerspectiveCamera, createGlyphScene, createGlyphOrbitControls } from "glyphcss";
import { resolveGeometry } from "@glyphcss/core";

const host = document.getElementById("scene");
const camera = createGlyphPerspectiveCamera({ rotX: 35, rotY: 0, zoom: 0.3, distance: 0, perspective: 8000, stretch: 1 });
const scene = createGlyphScene(host, { camera, autoSize: true, mode: "solid" });
scene.output.style.fontSize = "10px";
scene.output.style.lineHeight = "1";
scene.fit();
const polygons = resolveGeometry("cube", { size: 100 });
scene.add(polygons);
createGlyphOrbitControls(scene, { drag: true, wheel: true });
```



Drag to orbit; change tilt, zoom, or distance. This perspective demo uses `perspective: 8000` to make foreshortening easier to see.

## Choose a camera

```tsx
import { GlyphCamera, GlyphPerspectiveCamera, GlyphScene, GlyphMesh, GlyphOrbitControls } from "@glyphcss/react";

export function Example() {
  return (
    <GlyphPerspectiveCamera rotX={35} rotY={45} zoom={50}>
      <GlyphScene mode="solid">
        <GlyphMesh geometry="cube" />
        <GlyphOrbitControls drag wheel />
      </GlyphScene>
    </GlyphPerspectiveCamera>
  );
}
// Replace GlyphPerspectiveCamera with GlyphCamera for orthographic projection.
```

  

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

<template>
  <GlyphPerspectiveCamera :rot-x="35" :rot-y="45" :zoom="50">
    <GlyphScene mode="solid">
      <GlyphMesh geometry="cube" />
      <GlyphOrbitControls drag wheel />
    </GlyphScene>
  </GlyphPerspectiveCamera>
</template>
```

  

```ts
import { createGlyphPerspectiveCamera, createGlyphOrthographicCamera, createGlyphScene, createGlyphOrbitControls } from "glyphcss";
import { cubePolygons } from "@glyphcss/core";

const host = document.querySelector<HTMLElement>("#scene")!;
const camera = createGlyphPerspectiveCamera({ rotX: 35, rotY: 45, zoom: 50 });
const scene = createGlyphScene(host, { camera, mode: "solid" });
scene.add(cubePolygons({ center: [0, 0, 0], size: 1 }));
const controls = createGlyphOrbitControls(scene, { drag: true, wheel: true });

camera.rotY = 60;
scene.rerender();
scene.setOptions({ camera: createGlyphOrthographicCamera({ rotX: 35, zoom: 50 }) });

// On unmount:
// controls.destroy();
// scene.destroy();
```

`GlyphCamera` aliases `GlyphOrthographicCamera`: parallel lines stay parallel. `GlyphPerspectiveCamera` adds foreshortening. Wrap `GlyphScene` inside the camera in React/Vue; pass a camera handle to `createGlyphScene` in vanilla JS.

## Options and defaults

| Option | Default | Meaning |
|---|---|---|
| `rotX` | `65` | X rotation, degrees; `0` looks down Z |
| `rotY` | `45` | Y rotation, degrees |
| `zoom` | `0.65` | CSS pixels per world unit |
| `distance` | `0` | Perspective pull-back: CSS pixels; world units when `perspective: 0` |
| `perspective` | `32000` | Virtual-pixel perspective distance; larger looks flatter; `0` selects legacy orbit projection |
| `stretch` | `1` | Perspective-only extra horizontal scale |

Orthographic cameras use `rotX`, `rotY`, and `zoom`; `distance` has no effect. The renderer and hit layer share camera state. After mutating a vanilla camera, call `scene.rerender()`.