Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99
Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

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
PointerLockControls threejs.org sbcode.net codesandbox.io
PointerLockControls Selector codesandbox.io
First Person Shooter Example sbcode.net