Marks a movable point in the scene for other nodes to aim at — a look-at target you can place, parent, and animate like any object.
JavaScript API:
TargetAt
This is a SceneNode (a VisualizableSceneNode), not a constraint.
Its whole job is to hold a position: its world position is the look-at target.
It does NOT orient anything by itself — a separate sk-target-at-constraint
reads this node and drives the aiming node's orientation. This is the same
split as SpatialField + sk-field-constraint: one node carries the
data (position, visualization), another applies the effect.
Why a node. Because the target is a real scene node, its position comes from
the standard transform and parent hierarchy — so you get animation for free
(keyframe its x/y/z and every aimer tracks it), composition for free
(parent it under a moving platform for an inherited target), and an optional
on-canvas visualization.
Key attributes. Position is the ordinary node transform (x/y/z, and the
full parent hierarchy). visualize draws an arrow field pointing toward the
target so its location is visible while composing.
Related. Its paired effect is sk-target-at-constraint (put that on the
node you want to aim). The orbit equivalent is sk-orbit +
sk-orbit-constraint.
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 TargetAt node is a movable look-at target (with optional visualization).
Another node aims at it via a target-at-constraint referencing its id.
Animating the target makes the aimer track it. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-target-at id="look" y="2" visualize>
<sk-animation duration="3000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" x="-5"></sk-keyframe>
<sk-keyframe offset="1" x="5"></sk-keyframe>
</sk-animation>
</sk-target-at>
<!-- An arrow that keeps aiming at the moving target -->
<sk-arrow shaft-length="1.5">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-target-at-constraint target="#look" axis="+y"></sk-target-at-constraint>
</sk-arrow>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
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 |