AbstractDomAnnotationNode

← prev index next →

The base concept for an annotation: a piece of 2D content — HTML, SVG, or Markdown — pinned to a position in the 3D scene.

Base class — has no declarative element of its own; subclasses inherit its members.

Remarks

An annotation is a label, panel, or badge that lives at a world position and tracks it as the camera moves. Its content is the element's body (not an attribute); anchor chooses which edge of the content sits on the anchor point, and scale-with-distance makes it shrink with perspective. Because the body is real DOM, it can use ordinary CSS, and (with md) Markdown.

Member elements differ in how they interact with the 3D depth of the scene. All three stay anchored to their world position; they differ in layering: sk-live-annotation is live, interactive DOM that can be occluded by geometry; sk-overlay-annotation is live DOM whose layer always draws on top, never occluded; and sk-rasterized-annotation renders SVG to a depth-tested texture drawn in-scene.

The example pins an HTML label just above a sphere.

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

Inherited from: RenderableNode, SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

PropertyTypeDefaultDescriptionDeclared by
contentconfig-only string — The annotation body content as an inline markup string. AbstractDomAnnotationConfig
md boolean false Whether this annotation's light-DOM body is Markdown source. AbstractDomAnnotationNode
anchor AnchorAlignment "center" Gets the anchor alignment for this annotation. AbstractDomAnnotationNode
scaleWithDistance boolean false Gets whether this annotation scales with camera distance. AbstractDomAnnotationNode
classconfig-only string — Standard HTML class for the annotation host element. AbstractDomAnnotationConfig
styleconfig-only string — Standard inline style for the annotation host element. AbstractDomAnnotationConfig
overlay boolean false Whether this node renders as an overlay with depth-aware translucency. RenderableNode
overlayOccludedOpacity number 0.3 Alpha multiplier for overlay fragments occluded by scene geometry. RenderableNode
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

Other Properties

PropertyTypeDefaultDescriptionDeclared by
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
getBoundsInSpace(targetSpaceMatrix: Float32Array): { minX: number; maxX: number; minY: number; maxY: number; minZ: number; maxZ: number; } | null Computes the bounding box of this annotation in the specified target space. AbstractDomAnnotationNode
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
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.

↑ Documentation home · ← All classes