threepipe/website/plugin/PointerLockControlsPlugin.md

---

prev:

text: 'DeviceOrientationControlsPlugin'
link: './DeviceOrientationControlsPlugin'

next:

text: 'ThreeFirstPersonControlsPlugin'
link: './ThreeFirstPersonControlsPlugin'

---

PointerLockControlsPlugin

Example — Source Code — API Reference

PointerLockControlsPlugin adds support for using PointerLockControls from three.js. It works similar to controls in first-person shooter, captures the mouse pointer and uses it to look around with the camera.

After the plugin is added, it adds support for setting pointerLock as the key in scene.mainCamera.controlMode.

Sample Usage

import {ThreeViewer, PointerLockControlsPlugin, Mesh2} from 'threepipe'

const viewer = new ThreeViewer({...})

viewer.addPluginSync(PointerLockControlsPlugin)

// after some user action
viewer.scene.mainCamera.controlsMode = 'pointerLock'

// listen to lock/unlock events 
viewer.scene.mainCamera.controls?.addEventListener('lock', ()=> console.log('pointer locked'))
viewer.scene.mainCamera.controls?.addEventListener('unlock', ()=> console.log('pointer unlocked'))

// switch back to default orbit controls
viewer.scene.mainCamera.controlsMode = 'orbit'