OrthographicCamera

The flat, measured eye on the scene — a camera with no perspective, so an object keeps the same on-screen size however far away it is.

Declarative element: <sk-orthographic-camera>

Global: available as sk.OrthographicCamera inside a scene <script>.

Remarks

This is the orthographic member of the AbstractCamera family: like every camera it projects the 3D scene to the 2D viewport, but with parallel projection instead of perspective. Nothing gets smaller with distance and parallel lines stay parallel — the look of technical drawings, isometric games, minimaps, and 2D/UI overlays, and the way to compare sizes without perspective foreshortening.

Key attributes. height is the only framing control you need: the vertical size of the viewing box in world units (the width follows from the viewport aspect). A smaller height zooms in; it is animatable. near and far bound the depth range and, unlike a perspective camera, may be zero or negative (there is no vanishing point to avoid). Aim it with the node transform, the same as any camera.

Related. Its sibling sk-perspective-camera is the realistic-optics camera (distant things shrink). To orbit, pan, and auto-fit rather than hand-place the view, drive it with a sk-camera-orbit-control.

Constructor

constructor(config?: { height?: number; near?: number; far?: number; aspect?: number; autoClipping?: boolean; autoClippingMargin?: number; minNear?: number; maxFar?: number; id?: string; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number; class?: string; style?: string })

Inherited from: AbstractCamera, SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

// Create camera with 200-unit tall view
const camera = new OrthographicCamera({ id: 'ortho-cam',
  height: 200,
  near: 0,
  far: 100
});

// Position for isometric view
camera.z = 50;
camera.rotateX(-Math.PI / 4);
camera.rotateY(Math.PI / 4);

// 2D top-down view
const topDown = new OrthographicCamera({ id: '2d',
  height: 100,
  near: -10,
  far: 10
});
topDown.rotateX(-Math.PI / 2);  // Look down at XZ plane

↑ Documentation home · ← All classes