Fills a node's triangle faces with a material — the ordinary way to make a mesh look solid, giving its surface a color and shading rather than just an outline.
Declarative element:
<sk-surface-paint>
Not on the sk.* global — construct via the declarative element or a module import.
This is the surface member of the Paint family: like every paint it
applies a material to one part of a node's geometry; here that part is the
filled triangle surface, so the material's base color, tonemap, and lighting
response are what you see across the object's faces.
Key attributes. material (inherited from Paint) references the
material to render by id. cull-mode chooses which triangle faces to draw:
back draws only front faces — right for a closed solid; front draws only
back faces; and none draws both sides, which is what open or flat geometry
(a disc, a plane, a one-sided ribbon) needs so it does not vanish when viewed
from behind. Left unset, it follows the mesh's own default — back for most
solids, but none for open shapes like discs and planes. selection binds the
paint to a subset of the mesh's faces instead of the whole surface: it takes a
#id reference to a sk-selection authored on the same mesh, so several
paints on one mesh can fill disjoint face sets — a cube rendered as a die is six
selection-bound paints on one cube. Left unset, the paint fills the whole surface
(the original behavior); an unresolved selection draws nothing rather than
silently filling the whole mesh.
Related. A sk-selection names the faces this paint targets. Its
sibling paints cover the other parts of the geometry: sk-edge-paint
(wireframe edges) and sk-stroke-paint (spline strokes); several paints
can stack on one node in document order. The material it applies is a
sk-plain-material.
constructor(config?: { cullMode?: CullMode; selection?: string })Inherited from: Paint, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
cullModeanimatable |
CullMode |
"back" |
Gets the face culling mode. | SurfacePaint |
selection |
string |
— | Gets the authored selection token, or null when the paint fills the |
SurfacePaint |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
materialanimatable |
Material |
— | Gets the material this paint applies. | Paint |
noderead-only |
SceneNode |
— | Gets the node this paint is applied to. | Paint |
paintTargetread-only |
PaintTarget |
— | Gets the paint target. | Paint |
show |
boolean |
true |
Gets whether this paint is visible. | Paint |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
// Single-sided surface (default)
const solidPaint = sphere.addMaterialPaint(material, 'surface');
// A selection-bound paint (fills only the referenced faces)
const facePaint = cube.addMaterialPaint(material, 'surface', {
selection: '#die-top'
});Used in guides: Scene basics