Draws a sphere — the roundest primitive — built either as an evenly-triangulated subdivided icosahedron or as a classic latitude/longitude globe.
JavaScript API:
Sphere
This is a member of the AbstractMeshNode geometry-primitive family: a
solid, renderable shape you position, paint, and animate like any scene node. It is
the shape to reach for whenever you need a ball, a dome, or a spherical source of
clone positions.
Key attributes. radius sets the size, and is animatable — a sphere can pulse
or grow. sphere-type picks how the mesh is built: icosahedron (default)
subdivides an icosahedron into evenly distributed triangles, the best all-round
choice; standard builds a latitude/longitude globe (a "UV sphere") whose triangles
converge at the poles; hemisphere is a half-dome; tetrahedron, hexahedron, and
octahedron expose the lower-poly platonic bases. segments controls tessellation —
for the platonic types it is the subdivision count (each step quadruples the
triangles, so 2–3 is already smooth); for the latitude/longitude types it is the
number of divisions (16 or more for a round profile).
Related. Give it appearance with a sk-surface-paint (fills the faces) or
an sk-edge-paint (draws the wireframe), each naming a sk-plain-material.
It sits alongside the other primitives — sk-cube, sk-cylinder,
sk-torus — and, like every mesh, can supply clone positions to a
sk-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.
<!-- Three spheres showing what you control. LEFT: radius ANIMATES 0.6 -> 1.4 and
back, so the size attribute drives the mesh live. MIDDLE: the default
icosahedron, drawn as a wireframe so its evenly distributed triangulation
reads. RIGHT: a 'standard' latitude/longitude sphere, wireframe too, so the
pole convergence of that construction is obvious next to the even icosphere. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-plain-material id="wire" base-color="#e0b050"></sk-plain-material>
<!-- radius is animatable: the sphere breathes -->
<sk-sphere x="-2.6" radius="1" sphere-type="icosahedron" segments="3">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" radius="0.6"></sk-keyframe>
<sk-keyframe offset="1" radius="1.4"></sk-keyframe>
</sk-animation>
</sk-sphere>
<!-- default icosahedron construction, wireframe so triangulation shows -->
<sk-sphere radius="1" sphere-type="icosahedron" segments="2">
<sk-edge-paint material="#wire"></sk-edge-paint>
</sk-sphere>
<!-- latitude/longitude 'standard' construction, same radius — note the poles -->
<sk-sphere x="2.6" radius="1" sphere-type="standard" segments="16">
<sk-edge-paint material="#wire"></sk-edge-paint>
</sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
draggable |
<boolean> |
false |
Gets whether this node can be dragged. |
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 |
overlay |
<boolean> |
false |
Whether this node renders as an overlay with depth-aware translucency. |
overlay-occluded-opacity |
<number> |
0.3 |
Alpha multiplier for overlay fragments occluded by scene geometry. |
cast-shadowanimatable |
<boolean> |
true |
Gets whether this mesh casts shadows. |
radiusanimatable |
<number> |
1 |
Radius of the sphere. |
segments |
<number> |
2 |
Number of segments. |
sphere-type |
<sphere-type> ("standard" | "hemisphere" | "tetrahedron" | "hexahedron" | "octahedron" | "icosahedron") |
"icosahedron" |
Gets the sphere geometry type. The accessor name matches the |
cull-mode |
<cull-mode> ("front" | "back" | "none") |
— | Default face culling mode for surface paints. |
Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.
onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend
Used in guides: Scene basics