CameraControls

<CameraControls />

type CameraControlsProps = {
  /** Optional CameraControls subclass, default to `CameraControlsImpl` official class */
  impl?: typeof CameraControlsImpl
  /** The camera to control, default to the state's `camera` */
  camera?: PerspectiveCamera | OrthographicCamera
  /** DOM element to connect to, default to the state's `gl` renderer */
  domElement?: HTMLElement
  /** Reference this CameraControls instance as state's `controls` */
  makeDefault?: boolean
  /** Events callbacks, see: https://github.com/yomotsu/camera-controls#events */
  onControlStart?: (e? { type: 'controlstart' }) => void
  onControl?: (e? { type: 'control' }) => void
  onControlEnd?: (e? { type: 'controlend' }) => void
  onTransitionStart?: (e? { type: 'transitionstart' }) => void
  onUpdate?: (e? { type: 'update' }) => void
  onWake?: (e? { type: 'wake' }) => void
  onRest?: (e? { type: 'rest' }) => void
  onSleep?: (e? { type: 'sleep' }) => void
}

const [mycam, setMycam] = useState<THREE.PerspectiveCamera | null>();

<PerspectiveCamera ref={setMycam} />
{mycam && <CameraControls camera={mycam} />}

import { CameraControlsImpl } from "@react-three/drei"

const { ACTION } = CameraControlsImpl;

<CameraControls
  mouseButtons={{
    left: ACTION.ROTATE,
    middle: ACTION.DOLLY,
    right: ACTION.TRUCK,
    wheel: ACTION.DOLLY,
  }}
  touches={{
    one: ACTION.TOUCH_ROTATE,
    two: ACTION.TOUCH_DOLLY_TRUCK,
    three: ACTION.TOUCH_DOLLY_TRUCK,
  }}
/>

class MyCameraControls extends CameraControlsImpl {
  override rotate(...args: Parameters<CameraControlsImpl['rotate']>) {
    console.log('my rotate', ...args)
    return super.rotate(...args)
  }
}

<CameraControls impl={MyCameraControls} />