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.