misc

controls / pointerlock

What this shows

Click the canvas to lock the pointer, then walk with WASD or the arrow keys, jump with Space, and look around with the mouse over a field of 500 colored boxes.

Side by side with the three.js r186 original: misc_controls_pointerlock.html

Differences from three.js

There is no Click to play overlay with instructions; the canvas locks the pointer when clicked, and the keys listen on the focused canvas instead of document.
MeshPhongMaterial becomes LambertMaterial with flat shading, so the boxes have no white specular highlight.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const controls = new EASEL.PointerLockControls(camera, canvas);
canvas.addEventListener("click", () => controls.lock());

const raycaster = new EASEL.Raycaster(
  new EASEL.Vector3(),
  new EASEL.Vector3(0, -1, 0),
  0,
  10,
);

function animate() {

  if (controls.isLocked) {
    raycaster.ray.origin.copy(controls.object.position);
    raycaster.ray.origin.y -= 10;
    const onObject = raycaster.intersectObjects(objects, false).length > 0;

    controls.moveRight(-velocity.x * delta);
    controls.moveForward(-velocity.z * delta);
  }
  renderer.prepare(scene, camera);
  renderer.render(scene, camera);
}