---
contentHash: sha256:6e8d40e89511384a748da0145720bcda0be4c0758672350959d200716e111a76
documentId: element:sk-sphere
kind: element
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# sk-sphere

<a id="overview"></a>

## Overview

Draws a sphere — the roundest primitive — built either as an evenly-triangulated
subdivided icosahedron or as a classic latitude/longitude globe.

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.

<a id="example"></a>

## Example

```sk
<!-- 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>
```

<a id="attr-id"></a>

## id

Type: `<id>` · Required: no · Animatable: no

Unique identifier for the node, reflected to the host `id` attribute.

Related: [`type:id`](types/id.md)

<a id="attr-draggable"></a>

## draggable

Type: `<boolean>` · Required: no · Animatable: no · Default: `false` · Inherited from `sk-scene-node`

Gets whether this node can be dragged.

Related: [`type:boolean`](types/boolean.md)

<a id="attr-x"></a>

## x

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

X position.

Related: [`type:number`](types/number.md)

<a id="attr-y"></a>

## y

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Y position.

Related: [`type:number`](types/number.md)

<a id="attr-z"></a>

## z

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Z position.

Related: [`type:number`](types/number.md)

<a id="attr-h"></a>

## h

Type: `<angle>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Heading (Y-axis rotation) in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-p"></a>

## p

Type: `<angle>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Pitch (X-axis rotation) in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-b"></a>

## b

Type: `<angle>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Bank (Z-axis rotation) in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-quaternion"></a>

## quaternion

Type: `<quaternion>` · Required: no · Animatable: yes · Inherited from `sk-scene-node`

Rotation as quaternion (overrides h, p, b if provided)

Related: [`type:quaternion`](types/quaternion.md)

<a id="attr-sx"></a>

## sx

Type: `<number>` · Required: no · Animatable: yes · Default: `1` · Inherited from `sk-scene-node`

X-axis scale factor.

Related: [`type:number`](types/number.md)

<a id="attr-sy"></a>

## sy

Type: `<number>` · Required: no · Animatable: yes · Default: `1` · Inherited from `sk-scene-node`

Y-axis scale factor.

Related: [`type:number`](types/number.md)

<a id="attr-sz"></a>

## sz

Type: `<number>` · Required: no · Animatable: yes · Default: `1` · Inherited from `sk-scene-node`

Z-axis scale factor.

Related: [`type:number`](types/number.md)

<a id="attr-s"></a>

## s

Type: `<number>` · Required: no · Animatable: no · Inherited from `sk-scene-node`

Uniform scale factor for all axes (overrides sx, sy, sz if provided)

Related: [`type:number`](types/number.md)

<a id="attr-overlay"></a>

## overlay

Type: `<boolean>` · Required: no · Animatable: no · Default: `false` · Inherited from `RenderableNode`

Whether this node renders as an overlay with depth-aware translucency.

Related: [`type:boolean`](types/boolean.md)

<a id="attr-overlay-occluded-opacity"></a>

## overlay-occluded-opacity

Type: `<number>` · Required: no · Animatable: no · Default: `0.3` · Inherited from `RenderableNode`

Alpha multiplier for overlay fragments occluded by scene geometry.

Related: [`type:number`](types/number.md)

<a id="attr-cast-shadow"></a>

## cast-shadow

Type: `<boolean>` · Required: no · Animatable: yes · Default: `true` · Inherited from `AbstractMeshNode`

Gets whether this mesh casts shadows.

Related: [`type:boolean`](types/boolean.md)

<a id="attr-radius"></a>

## radius

Type: `<number>` · Required: no · Animatable: yes · Default: `1`

Radius of the sphere.

Related: [`type:number`](types/number.md)

<a id="attr-segments"></a>

## segments

Type: `<number>` · Required: no · Animatable: no · Default: `2`

Number of segments.

Related: [`type:number`](types/number.md)

<a id="attr-sphere-type"></a>

## sphere-type

Type: `<sphere-type>` · Required: no · Animatable: no · Default: `"icosahedron"`

Gets the sphere geometry type. The accessor name matches the

Related: [`type:sphere-type`](types/sphere-type.md)

<a id="attr-cull-mode"></a>

## cull-mode

Type: `<cull-mode>` · Required: no · Animatable: no · Inherited from `AbstractMeshNode`

Default face culling mode for surface paints.

Related: [`type:cull-mode`](types/cull-mode.md)

<a id="event-handlers"></a>

## Event handlers

<a id="attr-onclick"></a><a id="attr-ondblclick"></a><a id="attr-onauxclick"></a><a id="attr-oncontextmenu"></a><a id="attr-onpointerdown"></a><a id="attr-onpointerup"></a><a id="attr-onpointermove"></a><a id="attr-onpointercancel"></a><a id="attr-onpointerover"></a><a id="attr-onpointerout"></a><a id="attr-onpointerenter"></a><a id="attr-onpointerleave"></a><a id="attr-ongotpointercapture"></a><a id="attr-onlostpointercapture"></a><a id="attr-onwheel"></a><a id="attr-ondragstart"></a><a id="attr-ondrag"></a><a id="attr-ondragenter"></a><a id="attr-ondragover"></a><a id="attr-ondragleave"></a><a id="attr-ondrop"></a><a id="attr-ondragend"></a>

`onclick` — Handler for the click event.

`ondblclick` — Handler for the dblclick event.

`onauxclick` — Handler for the auxclick event.

`oncontextmenu` — Handler for the contextmenu event.

`onpointerdown` — Handler for the pointerdown event.

`onpointerup` — Handler for the pointerup event.

`onpointermove` — Handler for the pointermove event.

`onpointercancel` — Handler for the pointercancel event.

`onpointerover` — Handler for the pointerover event.

`onpointerout` — Handler for the pointerout event.

`onpointerenter` — Handler for the pointerenter event.

`onpointerleave` — Handler for the pointerleave event.

`ongotpointercapture` — Handler for the gotpointercapture event.

`onlostpointercapture` — Handler for the lostpointercapture event.

`onwheel` — Handler for the wheel event.

`ondragstart` — Handler for the dragstart event.

`ondrag` — Handler for the drag event.

`ondragenter` — Handler for the dragenter event.

`ondragover` — Handler for the dragover event.

`ondragleave` — Handler for the dragleave event.

`ondrop` — Handler for the drop event.

`ondragend` — Handler for the dragend event.

---

Related records: [`type:angle`](types/angle.md), [`type:boolean`](types/boolean.md), [`type:cull-mode`](types/cull-mode.md), [`type:id`](types/id.md), [`type:number`](types/number.md), [`type:quaternion`](types/quaternion.md), [`type:sphere-type`](types/sphere-type.md)