Variable EnhancedPivotControlsConst

Example

import { Canvas, EnhancedPivotControls, useMap } from '@wendylabsinc/react-three-map/maplibre';
import { Matrix4, Vector3, Euler } from 'three';

function DraggableObject() {
  const map = useMap();
  const [position, setPosition] = useState([0, 0, 0]);
  const [rotation, setRotation] = useState([0, 0, 0]);

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

  const onDragStart = () => {
    map.dragPan.disable();
    map.dragRotate.disable();
  };

  const onDragEnd = () => {
    map.dragPan.enable();
    map.dragRotate.enable();
  };

  const onDrag = (m4: Matrix4) => {
    setPosition(new Vector3().setFromMatrixPosition(m4).toArray());
    const euler = new Euler().setFromRotationMatrix(m4);
    setRotation(euler.toArray());
  };

  return (
    <>
      <EnhancedPivotControls
        matrix={matrix}
        scale={500}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onDrag={onDrag}
        annotations
      />
      <mesh position={position} rotation={rotation}>
        <boxGeometry args={[100, 100, 100]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </>
  );
}
Copy