---
title: orthographicCamera
description: Creates a stateful orthographic camera node that maps a box in world space directly into clip space. Use it for UI, CAD, or any scene where perspective foreshortening is undesirable.
---

# orthographicCamera



## Import

```ts
import { orthographicCamera, type OrthographicCameraOptions } from "vgpu/scene";
```

## Signature

```ts
interface OrthographicCameraOptions {
  readonly left: number;
  readonly right: number;
  readonly bottom: number;
  readonly top: number;
  readonly near?: number;
  readonly far?: number;
  readonly position?: import("vgpu/scene").Vec3Like;
  readonly target?: import("vgpu/scene").CameraVec3;
  readonly up?: import("vgpu/scene").CameraVec3;
  readonly label?: string;
}

declare function orthographicCamera(options: OrthographicCameraOptions): import("vgpu/scene").OrthographicCamera;
```

## Parameters

| Param            | Type       | Required | Default     | Notes                                                         |
| ---------------- | ---------- | -------- | ----------- | ------------------------------------------------------------- |
| options.left     | number     | ✔        | —           | Left plane of the world-space box.                            |
| options.right    | number     | ✔        | —           | Right plane. Must be greater than `left`.                     |
| options.bottom   | number     | ✔        | —           | Bottom plane.                                                 |
| options.top      | number     | ✔        | —           | Top plane. Must be greater than `bottom`.                     |
| options.near     | number     | ✖        | `0.1`       | Near clip plane distance. Must be positive.                   |
| options.far      | number     | ✖        | `100`       | Far clip plane distance. Must be greater than `near`.         |
| options.position | Vec3Like   | ✖        | `[0, 0, 0]` | Initial local position.                                       |
| options.target   | CameraVec3 | ✖        | —           | When given, the camera is oriented with `lookAt(target, up)`. |
| options.up       | CameraVec3 | ✖        | `[0, 1, 0]` | Up vector used only with `target`.                            |

**Returns:** `OrthographicCamera` — a scene node (`kind: "orthographic-camera"`) with `viewProjection`, `view`, `projection`, `position`, and `worldPosition`.
**Throws:** `VGPU-SCENE-VALUE-INVALID` for non-positive `near` or `far <= near`. Avoid `left === right` and `bottom === top`; they produce unusable matrices rather than a validation error.

## Examples

```ts
import { orthographicCamera } from "vgpu/scene";

const cam = orthographicCamera({
  left: -2,
  right: 2,
  bottom: -2,
  top: 2,
  position: [0, 0, 5],
  target: [0, 0, 0],
});

cam.set({ left: -4, right: 4 }); // updates the projection in place
```

## Notes

* Orthographic cameras still use a real view matrix; `set({ position })` and `lookAt()` orbit the box without perspective.
* On canvas resize, call `set({ left, right })` (or top/bottom) to keep pixel-perfect scaling.
* **See also:** `OrthographicCamera`, `perspectiveCamera`, `Camera`, `orbitControls`.

***

# OrthographicCamera

Class returned by `orthographicCamera()`. Extends `SceneNode`, implements `SceneCamera`.

## Import

```ts
import type { OrthographicCamera } from "vgpu/scene";
```

## Signature

```ts
declare class OrthographicCamera {
  set(values: import("vgpu/scene").OrthographicCameraValues): this;
  lookAt(target: import("vgpu/scene").Vec3Like, up?: import("vgpu/scene").Vec3Like): this;
  readonly left: number;
  readonly right: number;
  readonly bottom: number;
  readonly top: number;
  readonly near: number;
  readonly far: number;
  readonly viewProjection: Float32Array;
  readonly view: Float32Array;
  readonly projection: Float32Array;
  readonly worldPosition: Float32Array;
}
```

**Returns:** Not a callable; construct with `orthographicCamera(options)`.
**Throws:** `VGPU-SCENE-VALUE-INVALID` from `set()` on invalid near/far planes.

## Examples

```ts
import { orthographicCamera, type OrthographicCamera } from "vgpu/scene";

const cam: OrthographicCamera = orthographicCamera({ left: -1, right: 1, bottom: -1, top: 1 });
void cam.projection;
```

## Notes

* **See also:** `orthographicCamera`, `OrthographicCameraValues`, `SceneNode`.

***

# OrthographicCameraValues

Values accepted by `OrthographicCamera.set()`: projection planes plus node transform keys.

## Import

```ts
import type { OrthographicCameraValues } from "vgpu/scene";
```

## Signature

```ts
interface OrthographicCameraValues {
  readonly left?: number;
  readonly right?: number;
  readonly bottom?: number;
  readonly top?: number;
  readonly near?: number;
  readonly far?: number;
  readonly position?: import("vgpu/scene").Vec3Like;
  readonly rotation?: import("vgpu/scene").Vec3Like;
  readonly quaternion?: import("vgpu/scene").QuatLike;
  readonly scale?: number | import("vgpu/scene").Vec3Like;
  readonly visible?: boolean;
  readonly label?: string;
}
```

## Examples

```ts
import { orthographicCamera } from "vgpu/scene";

orthographicCamera({ left: -1, right: 1, bottom: -1, top: 1 }).set({ near: 0.01 });
```

## Notes

* **See also:** `OrthographicCamera`, `NodeTransformValues`.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)