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.
JavaScript API:
OrthographicCamera
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.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<!-- An orthographic camera with a 20-unit-tall view. `height` is the only
required parameter; the framing is parallel (no perspective). -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-sphere radius="3" segments="6">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-sphere>
<sk-orthographic-camera height="20"></sk-orthographic-camera>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
draggable |
<boolean> |
false |
Gets whether this node can be dragged. |
xanimatable |
<number> |
0 |
X position. |
yanimatable |
<number> |
0 |
Y position. |
zanimatable |
<number> |
0 |
Z position. |
hanimatable |
<angle> |
0 |
Heading (Y-axis rotation) in radians. |
panimatable |
<angle> |
0 |
Pitch (X-axis rotation) in radians. |
banimatable |
<angle> |
0 |
Bank (Z-axis rotation) in radians. |
quaternionanimatable |
<quaternion> ({ <number>, <number>, <number>, <number> }) |
— | Rotation as quaternion (overrides h, p, b if provided) |
sxanimatable |
<number> |
1 |
X-axis scale factor. |
syanimatable |
<number> |
1 |
Y-axis scale factor. |
szanimatable |
<number> |
1 |
Z-axis scale factor. |
s |
<number> |
— | Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only |
heightanimatable |
<number> |
200 |
Vertical size of the viewing volume. |
nearanimatable |
<number> |
0 |
Distance to near clipping plane. |
faranimatable |
<number> |
100.0 |
Distance to far clipping plane. |
auto-clipping |
<boolean> |
true |
When true, the renderer recomputes near/far each frame from the camera-space |
auto-clipping-margin |
<number> |
0.1 |
Padding applied to the auto-computed depth range as a fraction (e.g. 0.1 = 10%). |
min-near |
<number> |
— | Hard lower clamp on the auto-computed near plane. |
max-far |
<number> |
1e6 |
Hard upper clamp on the auto-computed far plane. |
Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.
onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend