GlyphCamera

Loading…

Camera

Auto-rotateZoomDistanceTilt

Code

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

Choose a camera

React

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>

Vanilla JS

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