Variable Compass3D`Const`

Compass3D: React.FC<Compass3DProps> = ...

A 3D compass component that displays cardinal directions (E, W, N, S) and vertical orientation (Up, Down) following the library's axis convention (X=East/West, Y=Up/Down, Z=South/North).

By default the compass renders as a HUD overlay that tracks the active camera so it always stays visible as the map moves and rotates.

Axis Colors:

Red (X-axis): East-West
Green (Y-axis): Up-Down
Blue (Z-axis): South-North

Example: Basic compass synced with map

import { Canvas, Compass3D, useMap } from '@wendylabsinc/react-three-map/maplibre';

function MapWithCompass() {
  const map = useMap();

  return (
    <Compass3D />
  );
}

See

Compass3DProps for available configuration options

Variable Compass3DConst

Example: Basic compass synced with map

See

Settings

Variable Compass3D`Const`