AbstractCamera

← prev index next →

The base concept for a camera: the eye that decides how the 3D scene is projected onto the 2D viewport.

Remarks

A camera is a scene node whose position and rotation set the viewpoint. Every scene has a default camera; declaring one of your own overrides it. Cameras share clipping and framing controls (near/far, auto-clipping, fit-to-bounds) and, being scene nodes, are positioned and animated like anything else.

Member elements: sk-perspective-camera projects with perspective (distant things look smaller — a focal-length and sensor-width set the field of view); sk-orthographic-camera projects in parallel with no foreshortening (a height sets the view size), useful for plans and diagrams.

Camera control. A camera holds no interaction of its own — it rejects child nodes. Interactive orbit, pan, and zoom come from a separate sk-camera-orbit-control, a scene-level sibling of the camera that drives it and can auto-fit the scene.

The example declares a perspective camera pulled back along +Z.

Abstract base class — not instantiated directly. Construct one of its concrete subclasses; this class contributes the members below to them.

Properties

Config Properties

PropertyTypeDefaultDescriptionDeclared by
aspectread-only number Gets the current aspect ratio. AbstractCamera
autoClipping boolean true Whether auto near/far clipping is enabled. AbstractCamera
autoClippingMargin number 0.1 Padding applied to the auto-computed depth range (fraction). AbstractCamera
minNear number Hard lower clamp on the auto-computed near plane. AbstractCamera
maxFar number 1e6 Hard upper clamp on the auto-computed far plane. AbstractCamera
idconfig-only string Unique identifier for the node, reflected to the host id attribute. SceneNodeConfig
xanimatable number 0 Gets the X position component. SceneNode
yanimatable number 0 Gets the Y position component. SceneNode
zanimatable number 0 Gets the Z position component. SceneNode
hanimatable number 0 Gets the heading (Y-axis) rotation in radians. SceneNode
panimatable number 0 Gets the pitch (X-axis) rotation in radians. SceneNode
banimatable number 0 Gets the bank (Z-axis) rotation in radians. SceneNode
quaternionanimatable Quaternion Gets the rotation as a quaternion. SceneNode
sxanimatable number 1 Gets the X-axis scale factor. SceneNode
syanimatable number 1 Gets the Y-axis scale factor. SceneNode
szanimatable number 1 Gets the Z-axis scale factor. SceneNode
sconfig-only number Uniform scale factor for all axes (overrides sx, sy, sz if provided) SceneNodeConfig
classconfig-only string Standard HTML class applied to the node host at construction SceneNodeConfig
styleconfig-only string Standard inline style applied to the node host at construction SceneNodeConfig

Other Properties

PropertyTypeDefaultDescriptionDeclared by
viewProjectionMatrixread-only Float32Array<ArrayBufferLike> Gets the combined view-projection matrix. AbstractCamera
viewMatrixread-only Float32Array<ArrayBufferLike> Gets the view matrix that transforms world space to camera space. AbstractCamera
near number Gets the distance to the near clipping plane. AbstractCamera
far number Gets the distance to the far clipping plane. AbstractCamera
hRad number 0 Gets the heading (Y-axis) rotation in radians. SceneNode
pRad number 0 Gets the pitch (X-axis) rotation in radians. SceneNode
bRad number 0 Gets the bank (Z-axis) rotation in radians. SceneNode
hDeg number 0 Gets the heading (Y-axis) rotation in degrees. SceneNode
pDeg number 0 Gets the pitch (X-axis) rotation in degrees. SceneNode
bDeg number 0 Gets the bank (Z-axis) rotation in degrees. SceneNode
xBasebase value number Gets the base (non-animated) value of X position. SceneNode
yBasebase value number Gets the base (non-animated) value of Y position. SceneNode
zBasebase value number Gets the base (non-animated) value of Z position. SceneNode
hBasebase value number 0 Gets the base (non-animated) value of heading (Y-axis rotation). SceneNode
pBasebase value number 0 Gets the base (non-animated) value of pitch (X-axis rotation). SceneNode
bBasebase value number 0 Gets the base (non-animated) value of bank (Z-axis rotation). SceneNode
quaternionBasebase value Quaternion Gets the base (non-animated) quaternion rotation. SceneNode
sxBasebase value number Gets the base (non-animated) value of X-axis scale. SceneNode
syBasebase value number Gets the base (non-animated) value of Y-axis scale. SceneNode
szBasebase value number Gets the base (non-animated) value of Z-axis scale. SceneNode
draggable boolean false Gets whether this node can be dragged. SceneNode
parentread-only SceneNode | null The parent node in the scene graph, or null at the root. SceneNode
sceneread-only any Gets the Scene this node belongs to, if any. SceneNode
posread-only Point3D Gets the world-space position of this node. SceneNode
matrixread-only Float32Array<ArrayBufferLike> Gets the computed 4x4 transformation matrix. SceneNode
animationsread-only SkenraAnimation[] Public getter for the animations affecting this target. SkenraAnimatable

Methods

MethodDescriptionDeclared by
getRayFromNDC(ndcX: number, ndcY: number): { origin: Float32Array; direction: Float32Array; } | null Creates a ray from the camera through a point in normalized device coordinates. AbstractCamera
worldPositionFromNDC(ndcX: number, ndcY: number, ndcZ: number = 0.5): [number, number, number] | null Computes a world-space position from Normalized Device Coordinates (NDC). AbstractCamera
worldPositionToNDC(worldX: number, worldY: number, worldZ: number): [number, number, number] | null Converts a world-space position to normalized device coordinates (NDC). AbstractCamera
getFrustumCornersWorldSpace(): { near: [number, number, number][]; far: [number, number, number][]; } Gets the 8 corners of the camera's view frustum in world space. AbstractCamera
getLookDirection(): [number, number, number] Gets the camera's look direction in world space. AbstractCamera
fitViewToBounds(bounds: SceneBounds, options?: FitViewOptions): void Adjusts camera to fit the given bounding box in view. AbstractCamera
fitViewToSphere(center: [number, number, number], radius: number, options?: FitViewOptions): void Adjusts camera to fit a bounding sphere in view. AbstractCamera
fitViewToScene(scene: Scene, options?: FitViewOptions): void Adjusts camera to fit all visible geometry in the scene. AbstractCamera
fitViewToNodes(nodes: SceneNode | SceneNode[], options?: FitViewOptions): void Adjusts camera to fit specific node(s) and their descendants. AbstractCamera
setViewOffset(fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number): void Sets a viewport offset for rendering a sub-region of the full viewport. AbstractCamera
clearViewOffset(): void Clears the viewport offset, restoring normal full-viewport rendering. AbstractCamera
addMaterialPaint(material: Material, paintTarget: PaintTarget, options?: any): Paint Applies a material to this node for a specific paint target. SceneNode
getPaints(): ReadonlyMap<PaintTarget, Paint> SceneNode
getOwnPaints(): readonly Paint[] Gets only the paints directly applied to this node (not inherited). SceneNode
removePaint(paint: Paint): void Removes a paint from this node. SceneNode
getWorldPosition(): number[] Returns this node’s origin in world space. SceneNode
getWorldMatrix(): Float32Array<ArrayBufferLike> Returns this node’s world transform — its local transform composed with all ancestor transforms. SceneNode
setViewportPosition(camera: AbstractCamera, x: number, y: number, z: number = 0.5): boolean Sets the node's local translation so that it appears at the specified viewport position. SceneNode
getViewportPosition(camera?: AbstractCamera): [number, number, number] | null Returns the node's current world position projected to viewport CSS pixel coordinates. SceneNode
setNDCPosition(camera: AbstractCamera, ndcX: number, ndcY: number, ndcZ: number = 0.5): boolean Sets the node's local translation so that it appears at the specified NDC position in the viewport. SceneNode
getBoundsInSpace(targetSpaceMatrix: Float32Array): { minX: number; maxX: number; minY: number; maxY: number; minZ: number; maxZ: number; } | null Computes the axis-aligned bounding box (AABB) of this node and its descendants SceneNode
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation Creates a new SkenraAnimation for this target per Web Animations API. SkenraAnimatable
removeAnimation(animation: SkenraAnimation): boolean Removes a specific animation from this object. SkenraAnimatable
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] Creates a constraint on this Animatable using a fluent API. SkenraAnimatable

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.