An abstraction around THREE.TransformControls.

You can wrap objects which then receive a transform gizmo.

import { TransformControls } from '@react-three/drei'
;<TransformControls mode="translate">
  <mesh />

You could also reference the object which might make it easier to exchange the target. Now the object does not have to be part of the same sub-graph. References can be plain objects or React.MutableRefObjects.

import { TransformControls } from '@react-three/drei'

<TransformControls object={mesh} mode="translate">
<mesh ref={mesh} />

If you are using other controls (OrbitControls, TrackballControls, etc), you will notice how they interfere, dragging one will affect the other. Default-controls will temporarily be disabled automatically when the user is pulling on the transform gizmo.

import { TransformControls } from '@react-three/drei'

<TransformControls mode="translate" />
<OrbitControls makeDefault />