Chapter 313: PointerLockControls

Core Idea

The implementation of this class is based on the Pointer Lock API. PointerLockControls is a perfect choice for first person 3D games.

Key Concepts

• isLocked : boolean (readonly): Whether the controls are locked or not.
• maxPolarAngle : number: Camera pitch, upper limit. Range is '[0, Math.PI]' in radians.
• minPolarAngle : number: Camera pitch, lower limit. Range is '[0, Math.PI]' in radians.
• pointerSpeed : number: Multiplier for how much the pointer movement influences the camera rotation.

Code Examples

const controls = new PointerLockControls( camera, document.body );
// add event listener to show/hide a UI (e.g. the game's menu)
controls.addEventListener( 'lock', function () {
	menu.style.display = 'none';
} );
controls.addEventListener( 'unlock', function () {
	menu.style.display = 'block';
} );

• What it demonstrates: Typical usage of PointerLockControls.

Reference Tables

Constructor

Signature
new PointerLockControls( camera : Camera, domElement : HTMLElement )

Properties

Property	Description
.isLocked : boolean (readonly)	Whether the controls are locked or not.
.maxPolarAngle : number	Camera pitch, upper limit. Range is '[0, Math.PI]' in radians.
.minPolarAngle : number	Camera pitch, lower limit. Range is '[0, Math.PI]' in radians.
.pointerSpeed : number	Multiplier for how much the pointer movement influences the camera rotation.

Methods

Method	Description
.getDirection( v : Vector3 ) : Vector3	Returns the look direction of the camera.
.lock( unadjustedMovement : boolean )	Activates the pointer lock.
.moveForward( distance : number )	Moves the camera forward parallel to the xz-plane. Assumes camera.up is y-up.
.moveRight( distance : number )	Moves the camera sidewards parallel to the xz-plane.
.unlock()	Exits the pointer lock.

Key Takeaways

1. PointerLockControls extends: EventDispatcher → Controls
2. Most relevant properties: isLocked, maxPolarAngle, minPolarAngle, pointerSpeed.
3. Key methods: getDirection, lock, moveForward, moveRight.

Connects To

• EventDispatcher: parent class
• Controls: parent class
• Source: examples/jsm/controls/PointerLockControls.js