OverlayAnnotationNode

Pins HTML/SVG/Markdown to a point in the 3D scene that is ALWAYS on top — a HUD, tooltip, or badge that geometry can never hide.

Declarative element: <sk-overlay-annotation>

Global: available as sk.OverlayAnnotationNode inside a scene <script>.

Remarks

This is the always-on-top member of the AbstractDomAnnotationNode annotation family: like every annotation its content is the element's own body and it tracks a world position as the camera moves. What distinguishes it from a sk-live-annotation is that it never participates in depth testing — its layer draws above all scene content and every other annotation, so it is never occluded. That makes it the choice for UI that must stay readable no matter what is in front of it: heads-up displays, tooltips, always-accessible panels, debug overlays.

Key attributes. The body content is the element's children (HTML, SVG, or — with md — Markdown), not an attribute; it is real, interactive DOM with full CSS (including animations). anchor chooses which edge sits on the world point; scale-with-distance makes it shrink with perspective. Content is not sanitized, so untrusted markup must be sanitized by the author first.

Related. When an annotation should read as part of the world and be hidden by geometry in front of it, use sk-live-annotation instead; for SVG drawn into the scene as a depth-tested texture, use sk-rasterized-annotation.

Constructor

constructor(config?: { content?: string; md?: boolean; anchor?: AnchorAlignment; scaleWithDistance?: boolean; class?: string; style?: string; overlay?: boolean; overlayOccludedOpacity?: number; id?: string; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number })

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

Properties

Config Properties

Other Properties

Methods

Example

// HUD element that's always visible
const hud = new OverlayAnnotationNode({
    id: 'hud',
    content: `
        <style>.hud { position: fixed; padding: 16px; background: rgba(0,0,0,0.8); }</style>
        <div class="hud"><span>Score: 100</span></div>
    `
});

// Access DOM for event listeners
hud.domRoot?.querySelector('span')?.addEventListener('click', () => {
    console.log('HUD clicked!');
});

// Tooltip that stays visible
const tooltip = new OverlayAnnotationNode({
    id: 'tooltip',
    content: '**Tip:** Click to interact', md: true
});

scene.appendChild(hud);
scene.appendChild(tooltip);

↑ Documentation home · ← All classes