Teil 2: Mausblick mit Pointer Lock

export const CAMERA = {
  /** Radians per pixel of mouse movement. */
  sensitivity: 0.002,
  /** Looking straight up or down flips the view, so stop just short of it. */
  maxPitch: (89 * Math.PI) / 180,
  /** Vertical field of view: about 100 degrees across on a 16:9 screen. */
  fov: (70 * Math.PI) / 180,
};

export class Input {
  /** True while the mouse is captured. The mouse only counts then. */
  locked = false;
  onLockChange: (locked: boolean) => void = () => {};

  private readonly canvas: HTMLCanvasElement;
  private mouseX = 0;
  private mouseY = 0;

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;

    document.addEventListener('pointerlockchange', () => {
      this.locked = document.pointerLockElement === canvas;
      this.onLockChange(this.locked);
    });
    document.addEventListener('mousemove', (event) => {
      if (!this.locked) return;
      this.mouseX += event.movementX;
      this.mouseY += event.movementY;
    });
  }

  /** Captures the mouse. Browsers only allow it in answer to a click or a key press. */
  async lock(): Promise<void> {
    try {
      // Raw mouse movement, without the acceleration of the operating system.
      await this.canvas.requestPointerLock({ unadjustedMovement: true });
    } catch {
      // Not every platform has raw movement (Linux does not), so ask again without it.
      await this.canvas.requestPointerLock().catch(() => {});
    }
  }

  /** The mouse movement since the last call, in pixels. */
  takeMouse(): { x: number; y: number } {
    const movement = { x: this.mouseX, y: this.mouseY };
    this.mouseX = 0;
    this.mouseY = 0;
    return movement;
  }
}

import type { Input } from './input.ts';
import { CAMERA } from './settings.ts';

/** Where the player looks: yaw turns around the vertical axis, pitch looks up and down. */
export class Look {
  yaw = 0;
  pitch = 0;

  update(input: Input): void {
    const mouse = input.takeMouse();
    this.yaw = (this.yaw + mouse.x * CAMERA.sensitivity) % (Math.PI * 2);
    this.pitch = Math.min(Math.max(this.pitch + mouse.y * CAMERA.sensitivity, -CAMERA.maxPitch), CAMERA.maxPitch);
  }
}

import { FreeCamera, Vector3, type Scene } from '@babylonjs/core/pure';
import type { Look } from './look.ts';
import { CAMERA } from './settings.ts';

/** The player's eyes: the camera, turned where they look. */
export class PlayerCamera {
  readonly camera: FreeCamera;

  constructor(scene: Scene) {
    this.camera = new FreeCamera('eyes', Vector3.Zero(), scene);
    // A near plane close to the eye lets the player hug a wall without seeing through it.
    this.camera.minZ = 0.05;
    this.camera.fov = CAMERA.fov;
  }

  update(look: Look): void {
    this.camera.rotation.set(look.pitch, look.yaw, 0);
  }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>First-person controller</title>
  </head>
  <body>
    <canvas id="game"></canvas>
    <div id="crosshair"></div>
    <div id="overlay">
      <strong>Click to look around</strong>
      <span>Move the mouse to look · Esc lets go</span>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #f5f3ff;
  pointer-events: none;
}

#overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  background: rgb(19 14 44 / 0.75);
  cursor: pointer;
}

#overlay.hidden {
  display: none;
}

#overlay strong {
  font-size: 28px;
}

import {
  Color3,
  Color4,
  DirectionalLight,
  Engine,
  HemisphericLight,
  RegisterStandardEngineExtensions,
  RegisterStandardMaterial,
  Scene,
  Vector3,
} from '@babylonjs/core/pure';
import { PlayerCamera } from './camera.ts';
import { Input } from './input.ts';
import { buildLevel } from './level.ts';
import { Look } from './look.ts';
import { enablePhysics } from './physics.ts';
import './style.css';

RegisterStandardEngineExtensions();
RegisterStandardMaterial();

const canvas = document.querySelector<HTMLCanvasElement>('#game')!;
const overlay = document.querySelector<HTMLElement>('#overlay')!;

const engine = new Engine(canvas, true, {}, true);
const scene = new Scene(engine);
scene.clearColor = Color4.FromHexString('#130e2cff');

// Light from the sky, tilted so that walls facing different ways get different shades,
// and a sun for contrast.
const sky = new HemisphericLight('sky', new Vector3(0.5, 1, 0), scene);
sky.intensity = 0.9;
sky.groundColor = Color3.FromHexString('#6a5cb0');
const sun = new DirectionalLight('sun', new Vector3(-0.5, -1, 0.7), scene);
sun.intensity = 0.4;

await enablePhysics(scene);
buildLevel(scene);

const input = new Input(canvas);
const look = new Look();
const view = new PlayerCamera(scene);
// At the start, at the eye height of a standing player. In the next part it follows one.
view.camera.position.set(0, 1.75, 0);

overlay.addEventListener('click', () => input.lock());
input.onLockChange = (locked) => overlay.classList.toggle('hidden', locked);

scene.onBeforeRenderObservable.add(() => {
  look.update(input);
  view.update(look);
});

engine.runRenderLoop(() => scene.render());
window.addEventListener('resize', () => engine.resize());