Three.js Blocks

Home
Documentation
Examples
Tools

ThirdPersonCamera

@three-blocks/proPhysicsCameraTPSWebGPUWebGL
new ThirdPersonCamera(physics : Object, options : Object)
Extends
PhysicsCamera

ThirdPersonCamera - Third-person camera with orbit and collision

Extends PhysicsCamera to provide third-person camera controls. Handles offset positioning, orbit rotation, pointer lock, and collision avoidance.

Constructor Parameters
physicsObject
Physics instance
optionsoptionalObject
Camera options
Default is {}.
  • canvasoptionalHTMLCanvasElement
    Canvas element for pointer lock
  • targetoptionalTHREE.Object3D
    Player mesh to follow (auto-detects body index from mesh.userData)
  • playerBodyIndexoptionalnumber
    Explicit body index to follow (overrides auto-detection)
  • offsetoptionalTHREE.Vector3
    Camera offset from target
  • lockRotationoptionalboolean
    Lock camera rotation to character movement
    Default is false.
  • sensitivityoptionalObject
    Mouse sensitivity
    Default is { x: 0.5, y: 0.5 }.
  • fovoptionalnumber
    Field of view
    Default is 70.
Example
import { ThirdPersonCamera } from '@three-blocks/pro';

const camera = new ThirdPersonCamera(physics, {
  canvas: renderer.domElement,
  target: playerMesh,
  offset: new THREE.Vector3(0, 2, -5),
  sensitivity: { x: 0.5, y: 0.5 },
});

camera.on('lock', () => console.log('Pointer locked'));

// In animate loop
camera.update(delta);
renderer.render(scene, camera);

Properties

.canvas : HTMLCanvasElement

Canvas element for pointer lock.

.offset : THREE.Vector3

Camera offset from target.

.lockRotation : boolean

Whether camera rotation is locked to character movement.

.sensitivity : Object

Mouse sensitivity for orbit rotation.

.locked : boolean

Whether pointer lock is currently active.

.yaw : number

Current yaw angle in radians.

.yaw :

Set yaw angle in radians.

Methods

on#

on(event : 'lock'|'unlock', callback : function) : this

Register an event callback.

Parameters
event'lock' | 'unlock'
Event name
callbackfunction
Callback function
Returns
this — For chaining

off#

off(event : 'lock'|'unlock', callback : function) : this

Remove an event callback.

Parameters
event'lock' | 'unlock'
Event name
callbackfunction
Callback to remove
Returns
this — For chaining

update#

update(delta : number)

Update camera state. Call each frame.

Parameters
deltanumber
Time delta in seconds

setOffset#

setOffset(offset : THREE.Vector3) : this

Set camera offset from target.

Parameters
offsetTHREE.Vector3
New offset
Returns
this — For chaining

setLockRotation#

setLockRotation(locked : boolean) : this

Set whether rotation is locked to character movement. When enabling lock, automatically snaps camera behind the target and releases pointer lock since mouse rotation is disabled.

Parameters
lockedboolean
Lock rotation
Returns
this — For chaining

lock#

lock()

Manually request pointer lock. Does nothing if lockRotation is enabled.

dispose#

dispose()

Clean up resources and event listeners.