Defines a spherical orbit around a pivot — a movable ring that other nodes can be made to revolve along.
JavaScript API:
Orbit
This is a SceneNode (a VisualizableSceneNode), not a constraint.
Its job is to hold orbit parameters: its world position is the pivot, and its
radius/azimuth/elevation describe a position on a sphere around that pivot.
It does NOT move anything by itself — a separate sk-orbit-constraint reads
this node and drives the constrained node's position (and orientation). This is
the same split as SpatialField + sk-field-constraint: one node
carries the data, another applies the effect.
Why a node. Because the pivot is a real scene node, you get animation for
free (keyframe azimuth and the orbit position sweeps around, carrying whatever an
sk-orbit-constraint binds to it), composition for free (parent it under a
moving platform for an inherited pivot), and an optional on-canvas visualization.
Key attributes. radius is the pivot-to-orbit distance. azimuth is the
angle around the +Y (up) axis, measured from +Z, positive turning toward +X.
elevation is the angle above the XZ plane (positive toward +Y). All three are
animatable. orient-toward-pivot also faces the riding node's orientation-axis
back at the pivot. visualize draws the orbit ring and interactive markers.
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.
<!-- An Orbit node holds orbit parameters and, with `visualize`, DRAWS the
orbit: a ring at `radius` around the pivot with a marker at the current
(azimuth, elevation). Animating `azimuth` sweeps that marker around the
ring — it is the position an sk-orbit-constraint would place a node at.
(The Orbit node does not move any node itself; a fixed sphere marks the
pivot at the centre. See sk-orbit-constraint to actually drive a node.) -->
<sk-scene>
<sk-directional-light p="52deg" h="23deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.4"></sk-ambient-light>
<sk-plain-material id="pivot-mat" base-color="#e0b040"></sk-plain-material>
<!-- A fixed sphere at the origin marks the orbit pivot. -->
<sk-sphere radius="0.5" segments="6">
<sk-surface-paint material="#pivot-mat"></sk-surface-paint>
</sk-sphere>
<sk-orbit radius="5" azimuth="0deg" elevation="23deg" visualize>
<sk-animation duration="10000ms" iterations="Infinity" easing="linear">
<sk-keyframe offset="0" azimuth="0deg"></sk-keyframe>
<sk-keyframe offset="1" azimuth="360deg"></sk-keyframe>
</sk-animation>
</sk-orbit>
</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 |
radiusanimatable |
<number> |
10 |
Initial radius (distance from pivot to orbit position). |
azimuthanimatable |
<angle> |
0 |
Initial azimuth angle in radians (rotation around Y axis from +Z). |
elevationanimatable |
<angle> |
0 |
Initial elevation angle in radians (angle from XZ plane). |
orient-toward-pivot |
<boolean> |
false |
When true, the associated OrbitConstraint will orient the target node |
orientation-axis |
<orientation-axis> ("+x" | "-x" | "+y" | "-y" | "+z" | "-z") |
"-z" |
The axis of the target node that should point toward the pivot. |