Axes

What is Axes3D?

Axes3D renders coordinate axes to provide orientation and scale reference in your 3D scene. By default, it shows the standard X, Y, and Z axes extending from the origin.

Basic Usage

const axes = scene.create("axes3d", {
  x: [-10, 10],
  y: [-10, 10],
  z: [-10, 10],
});

This creates axes extending from -10 to 10 on each axis.

Axis Configuration

Each axis can be configured independently with three possible values:

true: Show the axis extending infinitely. Currently not supported (it just sets the range to some high value).
false: Hide this axis
[min, max]: Show the axis within a specific range

// Full axes with specific ranges
scene.create("axes3d", {
  x: [-5, 5],
  y: [0, 10],  // Only positive Y
  z: [-5, 5],
});

// Only X and Y axes (for 2D-style visualization)
scene.create("axes3d", {
  x: [-10, 10],
  y: [-10, 10],
  z: false,
});

// Infinite axes
scene.create("axes3d", {
  x: true,
  y: true,
  z: true,
});

Styling

Color

By default, axes are white. Set a custom color:

scene.create("axes3d", {
  x: [-10, 10],
  y: [-10, 10],
  z: [-10, 10],
  color: "#888",
});

Thickness

Control the line width:

scene.create("axes3d", {
  x: [-10, 10],
  y: [-10, 10],
  z: [-10, 10],
  thickness: 0.5, // Thin axes
});

Decorations

Arrows

By default, axes display arrow cones at their positive ends to indicate direction. You can toggle this:

scene.create("axes3d", {
  x: [-5, 5],
  y: [-5, 5],
  z: [-5, 5],
  arrows: false, // Hide arrow tips
});

Tick Marks

Enable tick marks to show unit intervals along each axis:

scene.create("axes3d", {
  x: [-5, 5],
  y: [-5, 5],
  z: [-5, 5],
  tickmarks: true,
});

Tick marks and arrows follow per-axis visibility. If an axis is disabled (set to false), its tick marks and arrow are also hidden.

Common Patterns

Standard 3D Axes

scene.create("axes3d", {
  x: [-10, 10],
  y: [0, 10],
  z: [0, 10],
  thickness: 0.5,
});

Positive Quadrant Only

For visualizations where only positive values matter:

scene.create("axes3d", {
  x: [0, 10],
  y: [0, 10],
  z: [0, 10],
});

2D Mode (XY Plane)

For planar visualizations:

scene.create("axes3d", {
  x: [-10, 10],
  y: [-10, 10],
  z: false,
});

Examples

Axis ranges can be reactive:

const scale = scene.atom(5);

const axes = scene.create("axes3d", {
  x: scene.atom((get) => [-get(scale), get(scale)]),
  y: scene.atom((get) => [-get(scale), get(scale)]),
  z: scene.atom((get) => [-get(scale), get(scale)]),
});

// Axes expand/contract as scale changes
scale.set(10);

API Reference

Options

Property	Type	Default	Description
`x`	`boolean \| [number, number]`	`true`	X-axis configuration
`y`	`boolean \| [number, number]`	`true`	Y-axis configuration
`z`	`boolean \| [number, number]`	`true`	Z-axis configuration
`color`	`string`	`"white"`	Axis color
`thickness`	`number`	`1`	Line width
`visible`	`boolean`	`true`	Whether the axes are shown
`arrows`	`boolean`	`true`	Show arrow cones at positive ends
`tickmarks`	`boolean`	`false`	Show tick marks at unit intervals
`pointerEvents`	`"auto" \| "none"`	`"auto"`	Whether the axes receive pointer events
`tags`	`string[]`	`[]`	Custom tags

Axis Configuration Values

Value	Meaning
`true`	Show axis (infinite extent)
`false`	Hide axis
`[min, max]`	Show axis from min to max

Returned Item

Field	Type	Description
`id`	`string`	Unique identifier
`x`	`BoundAtom<boolean \| [number, number]>`	X-axis config atom
`y`	`BoundAtom<boolean \| [number, number]>`	Y-axis config atom
`z`	`BoundAtom<boolean \| [number, number]>`	Z-axis config atom
`color`	`BoundAtom<string>`	Color atom
`thickness`	`BoundAtom<number>`	Thickness atom
`visible`	`BoundAtom<boolean>`	Visibility atom
`arrows`	`BoundAtom<boolean>`	Arrows atom
`tickmarks`	`BoundAtom<boolean>`	Tick marks atom
`pointerEvents`	`BoundAtom<string>`	Pointer events atom
`tags`	`BoundAtom<string[]>`	Tags atom

On this page