`<sk-target-at-constraint>`

← prev index next →

Keeps a node aimed at another node, turning a chosen axis to face it — the way to make an object (or camera) track a moving point.

JavaScript API: TargetAtConstraint

Remarks

This is the look-at member of the Constraint family: like every constraint it drives its constrained target by recomputing from live scene state each frame — here it recomputes the target's orientation so the chosen axis keeps pointing at another node, so the aimer tracks that node even as it moves.

Key attributes. target names the node to aim at, by #id — either any scene node or a dedicated TargetAt node used as a movable look-at point. axis chooses which of the aimer's local axes points at the target (e.g. +y for an arrow, whose geometry heads along +Y); pick the axis that matches the object's natural "forward". up-node optionally references a node that fixes the roll about the aim direction when the default up would be ambiguous.

Related. Pairs with the sk-target-at support node (a movable, optionally visualized look-at point) and its class TargetAt. Sibling constraints in the Constraint family include sk-orbit-constraint (revolve around a pivot) and sk-align-to-spline-constraint (follow a path); the GPU-parallel sk-target-at-point-constraint aims every clone of a Cloner at a shared target at once.

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.

<!-- Orients the host node so its chosen axis points at a target node (by id). -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>

    <!-- The target to look at -->
    <sk-sphere id="target" x="4" radius="0.5" segments="6">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-sphere>

    <!-- An arrow that keeps pointing at the target -->
    <sk-arrow shaft-length="1.5">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-target-at-constraint target="#target" axis="+y"></sk-target-at-constraint>
    </sk-arrow>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`target`animatable	`<id-ref>`	—	The look-at reference: the `TargetAt` whose position the
`up-node`animatable	`<id-ref>`	—	Node whose Y-axis is used as the up reference for orientation reference by id
`axis`animatable	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+z"`	The axis of the target node that should point at the look-at position.

↑ Documentation home · ← All elements