Introduction

If available, controls have damping enabled by default. They manage their own updates, remove themselves on unmount, are compatible with the invalidateFrameloop canvas-flag. They inherit all props from their underlying three.js controls.

Every control component can be used with a custom camera using the camera prop:

const myCamera = useResource()

return (
  <>
    <PerspectiveCamera ref={myCamera} position={[0, 5, 5]} />
    <OrbitControls camera={myCamera.current} />
  </>
)

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).