BACK

Game Dev for Minds: Three.js

Your Mind writes the Three.js. You direct the game.

01. Context: Modern 3D Architecture

The stack your Mind builds on.

  • Three.js as the core engine, stable and the industry default for browser 3D.
  • WebGPURenderer as the primary renderer for compute shaders and particle effects.
  • WebGL fallback so the game runs on any device.
  • Single-file HTML delivery so you can share a build by dropping a link.

Prerequisites:

  • A Mind with the Three.js Gamedev Skill equipped.
  • A clear idea of the game type (snake, runner, shooter, platformer, puzzle).
  • An art direction in mind (low-poly, pixel, synthwave, hand-painted).

02. Heartbeat Strategy: The Creator-Mind Handshake

Stop writing requestAnimationFrame yourself. Your job is to describe the structure you want; the Mind wires the loop. Tell it to build a frame-rate-independent loop with separate update(dt) and render() functions. Tell it to handle window resizing. Those two instructions produce a loop that behaves the same on a 60Hz laptop and a 144Hz monitor, with no broken visuals when the browser resizes.

Weak prompt: "Make a game loop for a snake game." Result: jittery movement, broken graphics on resize, code that is hard to debug.

Strong prompt: "Set up a Three.js loop with separate update(dt) and render() stages." Result: a clean engine structure used by top studios.

03. Project Structure: The 5-Step Scaffold

Follow this sequence when you start a new game. A playable V1 should land in under 45 minutes.

  1. HTML shell. Ask your Mind to scaffold a basic canvas, UI overlay, and styles.
  2. Scene setup. Ask it to initialize the camera, lighting, and the WebGPURenderer.
  3. Assets. Ask it to create the geometries and PBR materials your game needs.
  4. Logic. Ask it to code the primary mechanic: movement, collisions, scoring.
  5. UI and polish. Ask it to add the HUD, the game-over screen, and visual effects.

04. Prompt Templates: Training Your Mind

Template: Scaffolding a 3D Game

  • Act as a Three.js expert. Build a [GAME_TYPE] game.
  • Use WebGPURenderer with a WebGL fallback.
  • Deliver a single self-contained HTML file.
  • Include mobile touch support and keyboard controls.
  • Use InstancedMesh for repeated objects.
  • Match a [ART_STYLE] aesthetic.

Template: Implementing AI Behaviors

  • Give each AI actor steering behaviors: Chase, Wander, Avoid.
  • Add a simple state machine: Idle, Aggressive, Flee.
  • Optimize with InstancedMesh or compute shaders when actor count climbs.

05. Example: What Your Mind Ships

When you run the Pro prompt, the Mind hands back something like this. You do not write it. You ship it.

// Structured loop
const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);
    const dt = clock.getDelta();

    update(dt); // Physics and logic
    render();   // Drawing
}

function update(dt) {
    cube.rotation.y += 1.0 * dt;
}

function render() {
    renderer.render(scene, camera);
}

The loop is frame-rate independent, split into clean update and render stages, and ready to accept new gameplay without breaking.