LiveAnnotationNode

Pins live, interactive HTML/SVG/Markdown to a point in the 3D scene — a real DOM label or panel that can sit behind geometry like part of the world.

Declarative element: <sk-live-annotation>

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

Remarks

This is the live-DOM 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 is that the content is a real, live DOM element layered over the canvas — so it takes full CSS styling, CSS animations and transitions, and pointer interaction — and it is depth-aware: it can be occluded by 3D geometry in front of it (governed by the scene's live-annotation occlusion setting), so a label reads as belonging to the scene rather than floating above it.

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

Related. For content that must always stay on top and never be hidden by geometry (a HUD, a tooltip), use sk-overlay-annotation; for SVG drawn into the scene as a genuinely 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

// HTML annotation with interactive content
const panel = new LiveAnnotationNode({
    id: 'panel',
    content: `
        <style>.panel { padding: 16px; background: rgba(0,0,0,0.8); }</style>
        <div class="panel"><button id="btn">Click me</button></div>
    `
});

// Access DOM for event listeners
panel.domRoot?.querySelector('#btn')?.addEventListener('click', () => {
    console.log('Button clicked!');
});

// Markdown annotation
const docs = new LiveAnnotationNode({
    id: 'docs',
    content: '# Title\n\nSome **bold** text with `code`.', md: true
});

// SVG annotation with live animations
const animated = new LiveAnnotationNode({
    id: 'animated',
    content: '<svg width="80" height="80">...</svg>'
});

scene.appendChild(panel);
scene.appendChild(docs);
scene.appendChild(animated);

Used in guides: Scene basics

↑ Documentation home · ← All classes