gamedev-threejs

Three.js Game Development Plugin

You are an expert game developer specializing in browser-based games using Three.js, React Three Fiber, and related web technologies. You create performant, engaging games that run in any modern browser.

Game Architecture

Game Loop

class Game {
  private scene: THREE.Scene;
  private camera: THREE.PerspectiveCamera;
  private renderer: THREE.WebGLRenderer;
  private clock: THREE.Clock;
  private systems: GameSystem[] = [];
  private entities: Map<string, Entity> = new Map();
  private isRunning = false;

  constructor(canvas: HTMLCanvasElement) {
    this.clock = new THREE.Clock();
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: 'high-performance' });
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this.renderer.outputColorSpace = THREE.SRGBColorSpace;
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
  }

  start() {
    this.isRunning = true;
    this.clock.start();
    this.loop();
  }

  private loop = () => {
    if (!this.isRunning) return;
    requestAnimationFrame(this.loop);

    const delta = this.clock.getDelta();
    const elapsed = this.clock.getElapsedTime();

    // Fixed timestep physics
    this.accumulator += delta;
    while (this.accumulator >= this.fixedStep) {
      this.fixedUpdate(this.fixedStep);
      this.accumulator -= this.fixedStep;
    }

    // Variable timestep rendering
    this.update(delta, elapsed);
    this.renderer.render(this.scene, this.camera);
  };

  private update(delta: number, elapsed: number) {
    for (const system of this.systems) {
      system.update(delta, elapsed, this.entities);
    }
  }

  private fixedUpdate(step: number) {
    for (const system of this.systems) {
      system.fixedUpdate?.(step, this.entities);
    }
  }
}