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

    Interface PivotControlsProps

    Props for the EnhancedPivotControls component.

    <EnhancedPivotControls
      matrix={matrix}
      scale={500}
      onDrag={handleDrag}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    />

    <EnhancedPivotControls
      matrix={matrix}
      scale={300}
      disableTranslations
      annotations
      onDrag={handleDrag}
    />

    <EnhancedPivotControls
      matrix={matrix}
      scale={400}
      rotationThickness={0.08}
      arrowHeadSize={0.1}
      activeAxes={[true, true, false]} // Only X and Y
      onDrag={handleDrag}
    />
    interface PivotControlsProps {
        matrix?: Matrix4;
        onDrag?: (matrix: Matrix4) => void;
        onDragStart?: () => void;
        onDragEnd?: () => void;
        scale?: number;
        fixed?: boolean;
        disableTranslations?: boolean | [boolean, boolean, boolean];
        disableRotations?: boolean | [boolean, boolean, boolean];
        annotations?: boolean;
        activeAxes?: [boolean, boolean, boolean];
        rotationThickness?: number;
        translationThickness?: number;
        arrowHeadSize?: number;
        arrowLength?: number;
        arrowHeadLength?: number;
        visible?: boolean;
        enabled?: boolean;
    }
    Index

    Properties

    matrix? onDrag? onDragStart? onDragEnd? scale? fixed? disableTranslations? disableRotations? annotations? activeAxes? rotationThickness? translationThickness? arrowHeadSize? arrowLength? arrowHeadLength? visible? enabled?

    Properties

    matrix?: Matrix4

    The transformation matrix representing the current position, rotation, and scale. Create this from your position and rotation state.

    const matrix = useMemo(() => {
      const m = new Matrix4();
      m.makeRotationFromEuler(new Euler(...rotation));
      m.setPosition(...position);
      return m;
    }, [position, rotation]);
    onDrag?: (matrix: Matrix4) => void

    Callback fired continuously while dragging. Receives the updated transformation matrix. Use this to update your object's position and rotation.

    const onDrag = useCallback((m4: Matrix4) => {
      // Extract position
      const pos = new Vector3().setFromMatrixPosition(m4);
      setPosition(pos.toArray());

      // Extract rotation
      const euler = new Euler().setFromRotationMatrix(m4);
      setRotation([euler.x, euler.y, euler.z]);
    }, []);
    onDragStart?: () => void

    Callback fired when dragging starts. Important: Use this to disable map interactions to prevent conflicts.

    const map = useMap();

    const onDragStart = useCallback(() => {
      map.dragPan.disable();
      map.dragRotate.disable();
      map.doubleClickZoom.disable();
    }, [map]);
    onDragEnd?: () => void

    Callback fired when dragging ends. Use this to re-enable map interactions.

    const map = useMap();

    const onDragEnd = useCallback(() => {
      // Small delay prevents the release event from triggering map pan
      setTimeout(() => {
        map.dragPan.enable();
        map.dragRotate.enable();
        map.doubleClickZoom.enable();
      }, 50);
    }, [map]);
    scale?: number

    Scale factor for the control gizmo size in meters. Choose a value appropriate for your zoom level and object size.

    1

    // For city-level zoom (zoom 13-15), use 300-500
    <EnhancedPivotControls scale={500} />

    // For street-level zoom (zoom 17-19), use 50-100
    <EnhancedPivotControls scale={50} />
    fixed?: boolean

    When true, the gizmo maintains a fixed screen size regardless of zoom level.

    false
    disableTranslations?: boolean | [boolean, boolean, boolean]

    Disable translation (movement) controls.

    • true: Disable all translation axes
    • false: Enable all translation axes
    • [x, y, z]: Disable specific axes (true = disabled)
    false

    // Disable all translations (rotation only mode)
    <EnhancedPivotControls disableTranslations />

    // Only allow horizontal movement (X and Z)
    <EnhancedPivotControls disableTranslations={[false, true, false]} />

    // Only allow vertical movement (Y axis)
    <EnhancedPivotControls disableTranslations={[true, false, true]} />
    disableRotations?: boolean | [boolean, boolean, boolean]

    Disable rotation controls.

    • true: Disable all rotation axes
    • false: Enable all rotation axes
    • [x, y, z]: Disable specific axes (true = disabled)
    false

    // Disable all rotations (translation only mode)
    <EnhancedPivotControls disableRotations />

    // Only allow Y-axis rotation (turntable style)
    <EnhancedPivotControls disableRotations={[true, false, true]} />
    annotations?: boolean

    Show angle annotations while rotating. Displays a tooltip with the rotation angle in degrees during drag operations.

    false

    <EnhancedPivotControls annotations />
    activeAxes?: [boolean, boolean, boolean]

    Control which axes are visible and interactive. Set to [x, y, z] where true = active.

    [true, true, true]

    // Only show X and Z axes (horizontal plane)
    <EnhancedPivotControls activeAxes={[true, false, true]} />

    // Only show Y axis (vertical)
    <EnhancedPivotControls activeAxes={[false, true, false]} />
    rotationThickness?: number

    Thickness of the rotation ring relative to its radius. Higher values make the rings easier to click but more visually prominent.

    0.03

    // Thicker rings for easier interaction
    <EnhancedPivotControls rotationThickness={0.08} />
    translationThickness?: number

    Thickness of the translation arrow shaft relative to scale.

    0.015

    // Thicker arrow shafts
    <EnhancedPivotControls translationThickness={0.025} />
    arrowHeadSize?: number

    Size of the arrow head relative to scale.

    0.05

    // Larger arrow heads
    <EnhancedPivotControls arrowHeadSize={0.1} />
    arrowLength?: number

    Length of the translation arrows relative to scale.

    1

    // Longer arrows
    <EnhancedPivotControls arrowLength={1.5} />
    arrowHeadLength?: number

    Length of the arrow head relative to scale.

    0.2
    visible?: boolean

    Whether the control gizmo is visible. Use this to hide controls when not in edit mode.

    true

    <EnhancedPivotControls visible={isEditMode} />
    enabled?: boolean

    Whether the control is interactive. When false, the gizmo is displayed but grayed out and non-interactive. Useful for showing controls for non-selected objects.

    true

    // Only enable for selected object
    <EnhancedPivotControls enabled={isSelected} />

    Settings

    Member Visibility

    On This Page

    Properties