Controls
If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the frameloop="demand"
canvas-flag. They inherit all props from their underlying THREE.Controls. They are the first effects to run before all other useFrames, to ensure that other components may mutate the camera on top of them.
Some controls allow you to set makeDefault
, similar to, for instance, PerspectiveCamera
. This will set @react-three/fiber's controls
field in the root store. This can make it easier in situations where you want controls to be known and other parts of the app could respond to it. Some drei controls already take it into account, like CameraShake
, Gizmo
and TransformControls
.
<CameraControls makeDefault />
const controls = useThree((state) => state.controls)
Drei currently exports OrbitControls
, MapControls
, TrackballControls
, ArcballControls
, FlyControls
, DeviceOrientationControls
, PointerLockControls
, FirstPersonControls
CameraControls
FaceControls
and other *Controls
Some controls drive an object, not a camera, eg: PresentationControls
.
But all controls involving a camera, react to the default one. If you have a <PerspectiveCamera makeDefault />
in your scene, they will control it. If you need to inject an imperative camera or one that isn't the default, use the camera
prop: <OrbitControls camera={MyCamera} />
.
PointerLockControls
additionally supports a selector
prop, which enables the binding of click
event handlers for control activation to other elements than document
(e.g. a 'Click here to play' button). All elements matching the selector
prop will activate the controls. It will also center raycast events by default, so regular onPointerOver/etc events on meshes will continue to work.