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.
JavaScript API:
LiveAnnotationNode
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.
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.
<!-- A live annotation is a 3D-anchored HTML overlay. The HTML/SVG/markdown is
the element's BODY content (not an attribute); `anchor` sets which edge
of the content faces the anchor point. Add `md` to treat the body as
Markdown. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-sphere radius="1" segments="6"><sk-surface-paint material="#mat"></sk-surface-paint></sk-sphere>
<!-- HTML panel anchored above the sphere -->
<sk-live-annotation y="1.5" anchor="bottom">
<div style="background: rgba(30,30,30,0.85); color: white; padding: 4px 10px;
border-radius: 8px; font: 13px monospace;">live label</div>
</sk-live-annotation>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
draggable |
<boolean> |
false |
Gets whether this node can be dragged. |
xanimatable |
<number> |
0 |
X position. |
yanimatable |
<number> |
0 |
Y position. |
zanimatable |
<number> |
0 |
Z position. |
hanimatable |
<angle> |
0 |
Heading (Y-axis rotation) in radians. |
panimatable |
<angle> |
0 |
Pitch (X-axis rotation) in radians. |
banimatable |
<angle> |
0 |
Bank (Z-axis rotation) in radians. |
quaternionanimatable |
<quaternion> ({ <number>, <number>, <number>, <number> }) |
— | Rotation as quaternion (overrides h, p, b if provided) |
sxanimatable |
<number> |
1 |
X-axis scale factor. |
syanimatable |
<number> |
1 |
Y-axis scale factor. |
szanimatable |
<number> |
1 |
Z-axis scale factor. |
s |
<number> |
— | Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only |
md |
<boolean> |
false |
When true, treat AbstractDomAnnotationConfig.content as |
anchor |
<anchor> ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") |
"center" |
The anchor point for positioning the annotation. |
scale-with-distance |
<boolean> |
false |
If true, maintains constant screen size; if false, scales with perspective. |
Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.
onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend
Used in guides: Scene basics