OrthographicCamera

A camera using an orthographic (parallel) projection.

Orthographic projection has no perspective foreshortening: objects render at the same size regardless of their distance from the camera, which makes this the camera to use for 2D image viewing. It pairs naturally with PanZoomControls.

The constructor frames a world-space rectangle, typically the physical extent of the image being viewed. Zoom and pan are then applied as scale and translation on top of that frame, and setFrame resets them. When the viewport's aspect ratio differs from the frame's, the frame is padded rather than stretched, so image pixels always stay square.

const camera = new OrthographicCamera({
 left: 0,
 right: 1024,
 top: 0,
 bottom: 1024
});

const idetik = new Idetik({
  canvas: document.querySelector('canvas')!,
  viewports: [{
    camera,
    layers: [imageLayer],
    cameraControls: new PanZoomControls(camera),
  }],
});

Extends Camera and inherits all public properties and methods.

Constructor

Creates an orthographic camera framing the given world-space rectangle.

new OrthographicCamera(props): OrthographicCamera;

Parameter	Description
props: OrthographicCameraProps	Initialization properties.

Types

OrthographicCameraFrame

A world-space rectangle for the camera to frame.

Property	Description
left: number	Left edge of the view frame in world units.
right: number	Right edge of the view frame in world units.
top: number	Top edge of the view frame in world units.
bottom: number	Bottom edge of the view frame in world units.

OrthographicCameraProps

Initialization properties for constructing an orthographic camera.

Property	Description
left: number	Left edge of the view frame in world units.
right: number	Right edge of the view frame in world units.
top: number	Top edge of the view frame in world units.
bottom: number	Bottom edge of the view frame in world units.
near?: number	Near clipping plane distance. Defaults to -1e6.
far?: number	Far clipping plane distance. Defaults to 1e6.
orientation?: SliceOrientation	Slice orientation. Defaults to "XY".

Accessors

viewportSize [number, number]

The world-space size of the rendered view as [width, height].

This is the camera frame padded to match the viewport's aspect ratio, so it reflects what is actually visible rather than the frame that was set.

get viewportSize(): [number, number];

type CameraType overrides

Identifies the camera type as OrthographicCamera.

get type(): CameraType;

orientation SliceOrientation

The slice orientation the camera faces.

get orientation(): SliceOrientation;

Methods

setAspectRatio() void overrides

Sets the aspect ratio (width / height) of the viewport the camera renders into. Called automatically by the owning viewport when it resizes.

setAspectRatio(aspectRatio): void;

Parameter	Description
aspectRatio: number	The viewport's width divided by its height.

setFrame() void

Reframes the camera to the given world-space rectangle, resetting any accumulated zoom and pan.

The frame may be padded horizontally or vertically at render time to match the viewport's aspect ratio (see viewportSize).

setFrame(frame): void;

Parameter	Description
frame: OrthographicCameraFrame	The view frame edges in world units.

setOrientation() void

Changes the slice orientation the camera faces. The current frame and zoom carry over numerically to the new plane axes. Call setFrame to reframe the view for the new plane.

setOrientation(orientation): void;

Parameter	Description
orientation: SliceOrientation	The slice plane for the camera to face.

zoom() void overrides

Zooms the view by the given factor relative to the current zoom level. Factors greater than 1 zoom in and factors between 0 and 1 zoom out.

zoom(factor): void;

Parameter	Description
factor: number	The magnification factor to apply.

getWorldViewRect() Box2

Computes the world-space rectangle currently visible in the viewport, accounting for zoom, pan, and aspect-ratio padding.

getWorldViewRect(): Box2;