Drives one property of a node from a field's weight at that node's position — the way to make position in space control a value like scale or opacity.
JavaScript API:
FieldConstraint
This is the field-reading member of the Constraint family: like every
constraint it drives its constrained
target by recomputing from live scene state each frame — here it samples a
SpatialField at the target's world position, turns the field weight into
a scalar, and writes it to one target property. It is a single-node,
CPU-evaluated constraint, distinct from its GPU per-clone counterpart.
Key attributes. field names the field to sample, by #id — any CPU-evaluable
field such as the SpatialField shapes (the GPU-only
sk-color-source-field has no effect here). target-property selects which property the
weight writes (e.g. s for uniform scale, opacity); the raw 0–1 weight can be
remapped into the value range that property needs. One field can drive several
field-constraints at once by sharing its #id.
Related. Consumes a SpatialField — the same field a material or
tonemap can also read, so one field can tint a surface and drive a property
together. Its GPU-parallel sibling is the sk-simple-point-constraint,
which applies a field weight to every clone of a Cloner at once rather
than to a single node.
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 ONE host property from a field’s weight (here: scale from proximity). -->
<sk-scene>
<sk-spherical-gradient-field id="proximity" inner-radius="2" outer-radius="8"></sk-spherical-gradient-field>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<!-- Scale tracks the field weight at the sphere's position -->
<sk-sphere x="3" radius="1" segments="6">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-field-constraint field="#proximity" target-property="s"></sk-field-constraint>
</sk-sphere>
</sk-scene>
| Attribute | Type | Default | Description |
|---|---|---|---|
fieldanimatable |
<id-ref> |
— | The field that provides weight values. reference by id |
target-property |
<property-name> |
— | The target property on the target animatable that will receive the mapped value. |
priority |
<number> |
— | Priority for effect ordering. |
composite |
<constraint-composite> ("replace" | "add" | "accumulate") |
— | Composite operation for this modifier. |