`<sk-arrow>`

Draws an arrow — a shaft with a conical head — the ready-made shape for showing a direction, a vector, or a force.

JavaScript API: Arrow

Remarks

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 to point at something — visualize a normal, a velocity, a force, or a navigation heading.

Key attributes. The arrow is a cylindrical shaft topped by a conical head, and all four proportions are animatable: shaft-radius and shaft-length size the stem, head-radius and head-length size the cone — so an arrow can grow or its head can flare live. orientation (+x, -x, +y, -y, +z, -z) picks the direction it points. rotation-segments sets the facets around the circumference (low for a debug arrow, higher for a smooth hero arrow); shaft-segments and head-segments subdivide along the length. The whole arrow is centered on the origin along the orientation axis.

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 is built from the same forms as sk-cone (its head) and sk-cylinder (its shaft), 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 arrows showing what you control. LEFT: shaft-length ANIMATES 0.8 -> 2 and
     back, so the arrow grows along its axis live. MIDDLE: a thick arrow drawn as a
     wireframe, so the shaft cylinder and head cone read. RIGHT: the SAME arrow
     re-oriented to +x — pointing sideways instead of up — showing how orientation
     picks the direction. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="wire" base-color="#e0b050"></sk-plain-material>

    <!-- shaft-length is animatable: the arrow grows -->
    <sk-arrow x="-2.4" shaft-radius="0.1" shaft-length="1.2" head-radius="0.25"
              head-length="0.4" rotation-segments="16">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" shaft-length="0.8"></sk-keyframe>
            <sk-keyframe offset="1" shaft-length="2"></sk-keyframe>
        </sk-animation>
    </sk-arrow>

    <!-- thick arrow, wireframe so shaft and head read -->
    <sk-arrow shaft-radius="0.18" shaft-length="1.2" head-radius="0.35"
              head-length="0.5" rotation-segments="12">
        <sk-edge-paint material="#wire"></sk-edge-paint>
    </sk-arrow>

    <!-- same arrow re-oriented to +x: pointing sideways -->
    <sk-arrow x="2.4" shaft-radius="0.08" shaft-length="1.6" head-radius="0.2"
              head-length="0.4" rotation-segments="12" orientation="+x">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-arrow>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

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.
`x`animatable	`<number>`	`0`	X position.
`y`animatable	`<number>`	`0`	Y position.
`z`animatable	`<number>`	`0`	Z position.
`h`animatable	`<angle>`	`0`	Heading (Y-axis rotation) in radians.
`p`animatable	`<angle>`	`0`	Pitch (X-axis rotation) in radians.
`b`animatable	`<angle>`	`0`	Bank (Z-axis rotation) in radians.
`quaternion`animatable	`<quaternion> ({ <number>, <number>, <number>, <number> })`	—	Rotation as quaternion (overrides h, p, b if provided)
`sx`animatable	`<number>`	`1`	X-axis scale factor.
`sy`animatable	`<number>`	`1`	Y-axis scale factor.
`sz`animatable	`<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-shadow`animatable	`<boolean>`	`true`	Gets whether this mesh casts shadows.
`shaft-radius`animatable	`<number>`	`0.06`	Radius of the cylindrical shaft.
`shaft-length`animatable	`<number>`	`0.8`	Length of the shaft along orientation axis.
`head-radius`animatable	`<number>`	`0.16`	Radius of the conical head base.
`head-length`animatable	`<number>`	`0.2`	Length of the conical head.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference.
`shaft-segments`	`<number>`	`1`	Number of segments along the shaft height.
`head-segments`	`<number>`	`1`	Number of segments along the head height.
`orientation`	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis along which the arrow extends.
`cull-mode`	`<cull-mode> ("front" \| "back" \| "none")`	—	Default face culling mode for surface paints.

Event handler attributes

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

↑ Documentation home · ← All elements