First-Person Camera

What this code does

- Pointer Lock API: captures mouse for smooth look controls without cursor limits.
- WASD Movement: standard FPS controls for forward/back/strafe movement.
- Mouse Look: pitch and yaw rotation based on mouse movement with sensitivity control.
- Collision Detection: prevents camera from moving through terrain boundaries.
- Procedural World: randomly generated boxes and trees for exploration.
- Click Canvas: to enable mouse capture, ESC to release.

JavaScript (plain)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 1.8, 5)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

let moveSpeed = 0.1
let mouseSensitivity = 0.002
let keys = {}
let pitch = 0, yaw = 0

// WASD movement
document.addEventListener('keydown', (e) => keys[e.code] = true)
document.addEventListener('keyup', (e) => keys[e.code] = false)

// Mouse look
document.addEventListener('mousemove', (e) => {
  if (document.pointerLockElement) {
    yaw -= e.movementX * mouseSensitivity
    pitch -= e.movementY * mouseSensitivity
    pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch))
    camera.rotation.set(pitch, yaw, 0, 'YXZ')
  }
})

function animate() {
  requestAnimationFrame(animate)
  // Handle WASD movement logic
  renderer.render(scene, camera)
}
animate()