`<sk-orbit-constraint>`

← prev index next →

Revolves a node around a pivot at a fixed radius by azimuth and elevation — the way to put an object (or a camera) on a controllable orbit.

JavaScript API: OrbitConstraint

Remarks

This is the orbiting member of the Constraint family: like every constraint it drives its constrained target by recomputing from live scene state each frame — here it places the target on a sphere around a pivot from spherical angles, so animating one angle sweeps a smooth revolution. The orbit parameters live on the constraint itself, or come from a separate Orbit node so several targets share one orbit definition (and its sk-orbit visualization).

Key attributes. radius is the orbit distance from the pivot. azimuth sweeps around the vertical axis and elevation tilts above/below the horizontal plane; both are angles and both are animatable, so sweeping azimuth through a full turn produces a continuous orbit. orient-toward-pivot additionally turns the target to face the pivot. Two further options refine it: orientation-axis chooses which local axis points inward when orienting (default -z), and min-radius clamps how close the orbit may pull in.

Related. Pairs with the sk-orbit support node (which holds shared orbit parameters and can draw the ring) and its class Orbit. Sibling constraints in the Constraint family include sk-align-to-spline-constraint (follow an arbitrary path) and sk-target-at-constraint (aim at a node); the GPU-parallel PointConstraint applies per-clone effects across a Cloner.

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.

<!-- Drives the host around a pivot at a fixed radius by sweeping `azimuth`.
     The orbiter is a CONE so `orient-toward-pivot` is visible: it keeps its tip
     pointed back at the centre sphere as it circles (turn that attribute off and
     the cone would keep a fixed heading instead). -->
<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="mat" base-color="#4f86c6"></sk-plain-material>
    <sk-plain-material id="pivot-mat" base-color="#e0b040"></sk-plain-material>

    <!-- A static pivot marker at the origin, and a static ring of markers at
         the orbit radius, so the scene's auto-fit camera frames the whole
         orbit path (the orbiting node's position is computed each frame). -->
    <sk-sphere radius="0.5" segments="6">
        <sk-surface-paint material="#pivot-mat"></sk-surface-paint>
    </sk-sphere>
    <sk-cloner mode="vertex">
        <sk-disc-points-source inner-radius="5" outer-radius="5.001"
            radial-segments="1" rotation-segments="32" orientation="+y"></sk-disc-points-source>
        <sk-sphere radius="0.08"><sk-surface-paint material="#pivot-mat"></sk-surface-paint></sk-sphere>
    </sk-cloner>

    <sk-cone bottom-radius="0.5" top-radius="0" height="1.4">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <!-- Orbit the origin at radius 5, sweeping azimuth. `orientation-axis="+y"`
             points the cone's +Y tip at the pivot as it circles. -->
        <sk-orbit-constraint radius="5" azimuth="0deg" elevation="23deg"
            orient-toward-pivot orientation-axis="+y">
            <sk-animation duration="6000ms" iterations="Infinity">
                <sk-keyframe offset="0" azimuth="0deg"></sk-keyframe>
                <sk-keyframe offset="1" azimuth="360deg"></sk-keyframe>
            </sk-animation>
        </sk-orbit-constraint>
    </sk-cone>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`pivot`	`<id-ref>`	—	Pivot the node orbits around — an element id reference (`#id`) of a node to track.
`radius`	`<number>`	`0`	Distance from the pivot point.
`azimuth`	`<angle>`	`0`	Horizontal angle around the Y axis (radians).
`elevation`	`<angle>`	`0`	Vertical angle from the XZ plane (radians).
`min-radius`	`<number>`	—	Minimum orbit radius the controller will zoom to.
`orient-toward-pivot`	`<boolean>`	`false`	Whether to orient the node to face the pivot.
`orientation-axis`	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"-z"`	Axis that points toward the pivot when orientTowardPivot is true.

Used in guides: Scene basics

↑ Documentation home · ← All elements