Skip to content

PointerLockControls

Import

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

Description

The PointerLockControls is normally used in First Person 3D view type games. It implements the inbuilt browsers Pointer Lock API to access raw mouse movement so that it can simulate rotating the cameras view as if you are a person moving your head to look around the scene.

When adding the <PointerLockControls /> JSX, a single click onto the canvas, will automatically lock the mouse and the PointerLockControls will be enabled. You can press the ESC key to exit the PointerLockControls.

./src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Canvas } from '@react-three/fiber'
import { Stats, PointerLockControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry args={[100, 10, 100, 100, 10, 100]} />
        <meshBasicMaterial wireframe color={'lime'} />
      </mesh>
      <PointerLockControls />
      <Stats />
    </Canvas>
  )
}

Working Example

<>

PointerLockControls Selector

In the above example, the PointerLockControls is enabled as soon as you click the canvas with the mouse. You may want to start the PointerLockControls from a click of a button within an instructions' panel instead. We can use the selector attribute to indicate which HTML element ID to listen to.

<PointerLockControls selector="#button" />

Working Example

<>
Controls drei
First Person Shooter Example sbcode.net

Comments