<sk-perspective-camera>

← prev index next →

The realistic eye on the scene — a camera with true perspective, where distant things look smaller and parallel lines converge, framed with real photographic controls (focal length, sensor size).

JavaScript API: PerspectiveCamera

Remarks

This is the perspective member of the AbstractCamera family: the camera decides how the 3D scene is projected onto the 2D viewport. Declaring one replaces the scene's default camera.

Aiming a camera is fiddly — a bare camera looks straight down its own local −Z, so you must position AND rotate it by hand to frame the subject, and it does not follow anything. For most scenes it is far easier to let a sk-camera-orbit-control own the framing: it points a camera at a pivot, fits the scene automatically, and gives you orbit / pan / zoom for free. Reach for a hand-placed camera only when you want a specific fixed shot.

Key attributes. The lens is described photographically. focal-length (in mm) sets the field of view — a short focal length (24mm) is a wide angle of view, a long one (85mm+) is a narrow telephoto; it is animatable, so the lens can zoom in and out. (The strength of perspective — how much near things loom over far ones — comes from where the camera stands, not the focal length; a wide lens simply invites you close, where perspective is strong.) sensor-width is the frame that focal length is measured against (36mm = full-frame); focal length and sensor width together (with the viewport aspect) determine the vertical field of view. near and far bound the visible depth range. Position is the usual node transform — a camera on +Z looking back at the origin is the simplest fixed setup.

Related. Its sibling sk-orthographic-camera drops perspective entirely (parallel projection, constant on-screen size). To orbit, pan, and auto-fit instead of hand-placing, use 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.

Attributes

AttributeTypeDefaultDescription
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
focal-lengthanimatable <number> 300 Focal length in mm.
sensor-widthanimatable <number> 36 Sensor width in mm.
nearanimatable <number> 0.1 Near clipping plane distance.
faranimatable <number> 500.0 Far clipping plane distance.
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.

Event handler attributes

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

Used in guides: Scene basics

↑ Documentation home · ← All elements