Turn Game Ideas Into Playable Prototypes

Outline the game. Your Mind be the Three.js expert and help build it.

Advanced

See It In Action

What You Need Before You Start

ThreeJS_Gamedev Skill equipped on your Mind
A game type: snake · runner · shooter · platformer · puzzle
An art style: low-poly · pixel · synthwave · hand-painted
Setup a Mind you have set up for game work
A clear concept for the game type and the art direction you want
A modern browser to test the output file
A clean text editor or IDE ready to receive the single-file HTML build

What Your Mind Can Do

Single-file scaffold: outputs the entire game as a single HTML file that you can host or share instantly.
Frame-rate-independent loop: wires a render loop that runs at the same speed on a 60Hz phone and a 240Hz monitor.
Scene initialization: sets up camera, renderer, and lighting to match your described art style.
Game objects: builds geometries, materials, and collision logic for your characters and obstacles.
HUD and game-over screen: adds score counters and restart flows as HTML overlays on top of the canvas.
Cross-device input: handles resize, focus loss, and mobile touch so the game works on any device.

Step-by-Step Guide

Step 1: Equip the Skill

Message your Mind and send the prompt below. It installs the Three.js Gamedev skill and confirms it is ready.

Sample Prompt: "Equip the skill 'ThreeJS_Gamedev' (ID: 513D473E-F36B-1410-8462-00039CE7DF11). Confirm you are ready to build a Three.js game."

Step 2: Scaffold the Game

Send this prompt before anything else. The loop split between update and render is hard to retrofit once the game has features, so set it up first.

Sample Prompt: "Act as a Three.js expert. Build a [GAME_TYPE] game. Use WebGPURenderer with WebGL fallback. Single self-contained HTML file. Mobile touch + keyboard controls. InstancedMesh for repeated objects. [ART_STYLE] aesthetic."

Step 3: Set Up the Game Loop

Describe the look you want. Your Mind picks sensible defaults to match it.

Sample Prompt: "Set up a Three.js loop with separate update(dt) and render() stages. Handle window resizing. Frame-rate-independent."

Step 4: Ask the Mind to Build the Following (in this order)

Build the HTML shell: canvas, UI overlay, styles. Keep UI as HTML on top of the canvas.
Scene setup: camera, lighting, WebGPURenderer

Sample prompt: "Initialise the camera and renderer for a low-poly synthwave aesthetic. Perspective camera with a sensible field of view, antialiasing enabled, a key light and a soft fill light to match the mood."

Assets: geometries and PBR materials

Sample prompt: "Create geometries and materials for a player character and a set of obstacles. Simple low-poly shapes, distinct colour for the player, obstacles arranged in a row the player will run toward."

Logic: movement, collisions, scoring

Sample prompt: "Code a frame-rate independent movement system: player driven by input, obstacles scrolling toward the player based on the clock delta, axis-aligned bounding box collision detection. Trigger a game-over flag on collision."

Polish: HUD, game-over screen, effects. Keep UI as HTML on top of the canvas

Sample prompt: "Add a score counter and a game-over screen as HTML overlays on top of the canvas. Show score during play, hide on game over. Show game-over screen with a restart button that resets the engine state."

Step 5: Add AI Behaviours

Send this prompt to give AI actors autonomous steering.

Sample Prompt: "Give each AI actor steering: Chase, Wander, Avoid. State machine: Idle, Aggressive, Flee. Use InstancedMesh or compute shaders when the actor count exceeds 50."

Ongoing Management

Use these prompt patterns to get cleaner, more specific output from your Mind.

Weak prompt	Strong prompt
"Make a game loop."	"Three.js loop with separate update(dt) and render() stages. Frame-rate-independent. Handle resize."
"Fix the jitter in my game."	"Refactor the movement logic to use the clock delta in every update step so the player and obstacles move at the same speed on a 60Hz phone and a 240Hz monitor."
"Make some boxes."	"Create low-poly geometries and materials for a synthwave environment: a flat ground plane, neon-edged obstacle blocks, and a player capsule with a contrasting emissive material."
"Make it work on phone."	"Add a resize listener that updates the renderer size and the camera aspect when the window changes. Add touch input handlers that map taps and swipes to the same actions as keyboard input."

Tips

Lock in the loop split before writing any gameplay because it is hard to retrofit once the game is full of features
Always drive movement from the clock delta, not a fixed step value
Test on a phone early; resize, touch, and focus loss break most browser games if not handled upfront
Tell your Mind the art direction and platform target at the start, it will keep all its choices consistent with that context throughout