Arrow

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

Declarative element: <sk-arrow>

Global: available as sk.Arrow inside a scene <script>.

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.

Constructor

constructor(config?: { shaftRadius?: number; shaftLength?: number; headRadius?: number; headLength?: number; rotationSegments?: number; shaftSegments?: number; headSegments?: number; orientation?: AxisOrientation; cullMode?: CullMode; overlay?: boolean; overlayOccludedOpacity?: number; id?: string; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number; class?: string; style?: string })

Inherited from: AbstractMeshNode, RenderableNode, SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

// Create a standard arrow along Y axis (default dimensions)
const arrow = new Arrow({ id: 'my-arrow' });

// Create a thick arrow for visualization
const thickArrow = new Arrow({ id: 'thick',
    shaftRadius: 0.15,
    shaftLength: 1.5,
    headRadius: 0.3,
    headLength: 0.4,
    rotationSegments: 16
});

// Create a horizontal arrow along X axis
const horizontalArrow = new Arrow({ id: 'x-axis',
    shaftRadius: 0.05,
    shaftLength: 2,
    headRadius: 0.15,
    headLength: 0.3,
    rotationSegments: 12,
    orientation: '+x'
});

// Visualize surface normals
const normalArrow = new Arrow({ id: 'normal',
    shaftRadius: 0.02,
    shaftLength: 0.5,
    headRadius: 0.06,
    headLength: 0.1,
    orientation: '+y'
});

// Force arrow for physics visualization
const forceArrow = new Arrow({ id: 'force-vector',
    shaftRadius: 0.08,
    shaftLength: 2.0,
    headRadius: 0.2,
    headLength: 0.4,
    rotationSegments: 12
});

↑ Documentation home · ← All classes