React Three Map - v1.0.9
    Preparing search index...

    Interface Compass3DProps

    Props for the Compass3D component.

    <Compass3D />

    <Compass3D
      overlay={false}
      position={[100, 50, 100]}
      scale={50}
      cylinderLength={3}
      sphereRadius={0.3}
    />
    interface Compass3DProps {
        cylinderLength?: number;
        cylinderRadius?: number;
        sphereRadius?: number;
        position?: [number, number, number];
        bearing?: number;
        pitch?: number;
        scale?: number;
        overlay?: boolean;
        alignment?:
            | "top-left"
            | "top-right"
            | "bottom-left"
            | "bottom-right"
            | "top-center"
            | "bottom-center"
            | "center-left"
            | "center-right";
        margin?: [number, number];
        syncWithCamera?: boolean;
    }
    Index

    Properties

    cylinderLength? cylinderRadius? sphereRadius? position? bearing? pitch? scale? overlay? alignment? margin? syncWithCamera?

    Properties

    cylinderLength?: number

    Length of each axis cylinder.

    2
    cylinderRadius?: number

    Radius of the axis cylinders.

    0.05
    sphereRadius?: number

    Radius of the endpoint spheres (N, S, E, W, Up, Down).

    0.2
    position?: [number, number, number]

    Position of the compass in 3D space [x, y, z].

    [0, 0, 0]

    // Place compass at a fixed location
    <Compass3D position={[500, 100, 500]} />
    bearing?: number

    Map bearing (rotation) in degrees. Used when overlay is false or syncWithCamera is false.

    0

    const map = useMap();
    const [bearing, setBearing] = useState(0);

    useEffect(() => {
      const onRotate = () => setBearing(map.getBearing());
      map.on('rotate', onRotate);
      return () => map.off('rotate', onRotate);
    }, [map]);

    <Compass3D bearing={bearing} />
    pitch?: number

    Map pitch (tilt) in degrees. Used when overlay is false or syncWithCamera is false.

    0

    <Compass3D bearing={map.getBearing()} pitch={map.getPitch()} />
    scale?: number

    Scale multiplier for the entire compass. Use this to size the compass appropriately for your scene.

    1

    // Large compass for city-level view
    <Compass3D scale={100} />

    // Small compass for street-level view
    <Compass3D scale={10} />
    overlay?: boolean

    Render the compass as a screen-space overlay (recommended). When false, it stays in world space.

    true
    alignment?:
        | "top-left"
        | "top-right"
        | "bottom-left"
        | "bottom-right"
        | "top-center"
        | "bottom-center"
        | "center-left"
        | "center-right"

    Screen alignment for the overlayed compass.

    'top-right'
    margin?: [number, number]

    Margin in pixels from the aligned screen edges when overlayed.

    [32, 32]
    syncWithCamera?: boolean

    When true, the overlay uses the active camera orientation automatically. Set to false to drive orientation manually via bearing and pitch.

    true

    Settings

    Member Visibility

    On This Page

    Properties