PointerLockControls

First-person view controller using the Pointer Lock API. Click to lock, ESC to exit.

Usage

import { PointerLockControls } from '@threeuse/core/plugins'

app.use(PointerLockControls, { pointerSpeed: 1 })

// Lock on click
canvas.addEventListener('click', () => app.$pointerLockControls.lock())

// Listen to lock/unlock events
app.$pointerLockControls.addEventListener('lock', () => { /* locked */ })
app.$pointerLockControls.addEventListener('unlock', () => { /* unlocked */ })

Options

Option	Type	Default	Description
pointerSpeed	number	1	Mouse sensitivity

Movement (implement in your code)

app.onBeforeRender((delta) => {
  if (!app.$pointerLockControls.isLocked)
    return
  app.$pointerLockControls.moveForward(speed * delta)
  app.$pointerLockControls.moveRight(strafe * delta)
})

Demo

🎮

点击画面进入第一人称模式

第一人称控制：🖱️ 移动 — 转动视角W / S — 前进 / 后退A / D — 左移 / 右移ESC — 退出