Three.js Game Skills
majidmanzarpour/threejs-game-skills · MIT · 66 entries
Nine agent skills for building three.js browser games. With them come a Vite starter, a shader and material cookbook, game-feel code, a headless canvas inspector, and helper scripts for three paid asset services.
- Get it
npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -yFor Codex, use -a codex.
- Needs
Nothing to read the skills. To run what they build: Node and npm, Python 3 for the helper scripts, and Chromium through Playwright for the inspector and tests. Optional and paid: Tripo, Gemini and ElevenLabs keys for the three generator skills.
- Sends off your machine
Nothing by itself. Three helper scripts call paid services when an agent runs them with a key: prompts and local images go to Tripo and to Google's Gemini, and prompts, text and audio files go to ElevenLabs. The director skill tells the agent to use those services by default for "premium" requests when the keys are set.
- We watched it run
Every recipe in the shader and material cookbook compiled and drew on the first run: nine materials on nine balls, a rim glow, swaying grass, a dissolve, a sky dome, bloom.

Driven by one number instead of the clock, the cookbook scene gave the same picture every time. So its shaders can be rendered frame by frame. 120 frames took 99 seconds with software rendering.
The starter built in 0.2 seconds and drew a small arena game that answered the keys. As shipped it is not frame-exact: its loop reads the browser's clock.

- Not tried here
The three generator scripts and everything that needs a paid key, the canvas inspector, the tests and the game-feel code were read, not run. Nothing was tried inside Remotion.
- License
MIT
Nothing third-party is bundled. What the three paid services return falls under those services' terms.
Everything in it
three.js and WebGL
- Audio pitch variance and duckingVary each playback's pitch by plus or minus 6 percent from a seeded generator so repeats do not sound machine-made, and duck the bed under…
- AudioSystem.tsA Web Audio context unlocked on the first key or pointer press, and one synthesised pickup blip (a triangle wave swept up over 0.12 s)…
- Bare brushed metal materialRaw steel that needs the environment map to read as metal. One line of three.js; assumes the environment map setup.
- Camera kick and FOV punchAdd 4 to 8 degrees of field of view on a boost or a hit and let it decay with a 0.2 s time constant; remember updateProjectionMatrix()…
- CameraRig.tsA follow camera at a fixed offset that eases toward its target with an exponential lag (1 - exp(-dt / lag)) and looks slightly ahead of it…
- Cheap fake glass materialTransparent clearcoat with no extra render pass, for repeated windows, visors and shields. One line of three.js; assumes the environment…
- Cloth materialHigh roughness plus sheen for the soft edge highlight of fabric. One line of three.js; assumes the environment map setup.
- dispose.tsdisposeObject3D walks a three.js object and frees its geometries, materials and every texture on them. Use it when a scene is torn down so…
- Dissolve and spawnMakes an object appear or vanish in small blocks with a glowing edge. One uniform, uProgress from 0 to 1, is the whole state, which makes…
- Emissive level-of-detail signalsRaise emissiveIntensity or swap material by distance so far lights still read; keep the color the same so identity survives.
- Emissive signal materialA dark base with a glow strong enough to feed bloom, for beacons, status lights and pickup cores. One line of three.js; assumes the…
- Fake contact shadowA flat plane with a radial-gradient canvas texture under an object: grounds a floating thing with one draw call and no shadow map.
- Fresnel rim glowAdds a colored glow at the grazing edges of a standard material by injecting three lines of GLSL with onBeforeCompile, so the lit material…
- GameAudio manager shapeA 25-line Web Audio manager: unlock on a gesture, load and decode buffers by id, play through named gain groups (master, sfx, ui, ambience…
- Gamepad rumbleFeature-detected controller vibration with a swallowed promise. Interactive use only; nothing to render. Code is in the reference page…
- Glossy ceramic materialA sharp wet-look reflection with full clearcoat. In our trial the white version bloomed as hard as the emissive ball under a bright light…
- Gradient sky domeA back-facing sphere with a small shader: a top color, a horizon color, a sun disc and its halo. One draw call and no textures, for any…
- HitstopA 60 to 90 ms near-freeze on a heavy hit: scale the gameplay delta to 0.05 while the camera and feedback keep real time. In a video it is…
- Impact flashPulse a material's emissiveIntensity to a peak and tween it back in 0.22 s; for big events add a one-frame white overlay div fading over…
- InputController.tsKeyboard (WASD and arrows, Space or Shift to dash) and a touch stick merged into one movement vector, with pointer-cancel handling so a…
- Loop.tsA 30-line animation loop: requestAnimationFrame, delta in seconds capped at 0.05, update then render. It reads the browser's clock; to…
- Matcap propsMeshMatcapMaterial bakes lighting into one texture: the cheapest lit-looking material for background props. It ignores scene lights.
- Matte plastic materialMid roughness with a muted reflection, for housings and crates. One line of three.js; assumes the environment map setup.
- Painted metal materialClearcoat over a colored base, for a car body or a hull panel. One line of three.js; assumes the environment map setup.
- Pickup popA collected thing scales up to 1.6, rises and fades over 0.28 s, with a 120 ms scale punch on its counter. A good recipe for a number or an…
- Polygon-offset decalsA flat mesh laid on a surface with polygonOffset so it does not flicker: panel lines, numbers and marks.
- Post-processing chainThe finishing pass: EffectComposer with a render pass, bloom (strength 0.45, radius 0.3, threshold 0.85), a small vignette shader, and…
- random.ts (seeded random)mulberry32 in nine lines: createSeededRandom(seed) returns a function that gives the same sequence every time. The thing to use in place of…
- Rapier setup with a fixed timestepHow to add real physics to a three.js scene: Rapier's world, a 1/60 s fixed step fed by a clamped accumulator, bodies and colliders…
- Real refractive glass materialTrue transmission for one or two hero surfaces seen close. Costly: every transmissive material adds a whole extra scene render each frame…
- Renderer and environment map setupFive lines that give a scene studio reflections with no HDR file: sRGB output, ACES tone mapping, and a RoomEnvironment baked once through…
- Renderer.tscreateRenderer (antialias, sRGB output, ACES tone mapping at 1.05 exposure, PCF shadows) and resizeRenderer, which keeps canvas size, pixel…
- Rubber materialNear-black, almost no reflection, for tyres and grips. One line of three.js; assumes the environment map setup.
- Scrolling emissive panelsBands of light that travel along a surface, for energy conduits, charge bars and data flowing through a pipe. Time is one uniform (uTime)…
- Squash and stretchDeform on impact and bounce back with easeOutBack, keeping volume: when one axis scales by s the other two scale by 1 / sqrt(s). About 0.9…
- threejs-3d-generatorDrives the paid Tripo API to make 3D models for a three.js project: text to 3D, image to 3D, texturing, auto-rigging, animation…
- threejs-aaa-graphics-builderHow to lift a three.js scene from primitives to authored-looking graphics, in this order: forms, then materials, then lighting, then…
- threejs-audio-generatorDrives the paid ElevenLabs API for game sound: short sound effects, looping ambience, music tracks, spoken lines, voice conversion from a…
- threejs-debug-profilerHow to find why a three.js page is blank, broken or slow: reproduce first, then an ordered checklist for blank canvases (canvas size, WebGL…
- threejs-game-directorThe entry skill: sets how far to take a three.js browser game from the user's own words (a small arcade game is not a request for the…
- threejs-game-ui-designerHow to design a game's HUD, menus and touch controls as game interface, not a web dashboard: hierarchy (status, objective, feedback…
- threejs-gameplay-systemsHow to make a playable loop: a one-page design brief, a core-loop contract proved in code, a level plan, then small ownership folders…
- threejs-image-generatorDrives Google's Gemini image API to make the 2D layer of a 3D project: concept sheets, clean reference images for image-to-3D, texture…
- threejs-qa-releaseHow to prove a three.js game works the way a player meets it: build, open in a real browser, check console errors and non-blank canvas…
- Trauma-based screenshakeCamera shake where shake equals trauma squared, trauma decays 1.4 per second and is capped at 1, and the noise comes from accumulated time…
- TweenManager and three easingsA 40-line tween runner with easeInQuad, easeOutCubic and easeOutBack (the one that overshoots), advanced by a delta you pass in. No…
- Vertex-colour ambient occlusionDarkens creases by baking a color attribute into the mesh: contact shading with no texture and no extra draw call.
- Wind swaySways grass cards, flags or cables in the vertex shader, anchored at the base, with each instance of an InstancedMesh out of phase by its…
Starters
- threejs-vite-game starterA whole Vite + TypeScript + three.js starter: one arena, a capsule player you move with WASD or a touch stick, eight pickups, a HUD…
Agent skills
- Evidence manifest formatA small JSON format that declares which viewport and state pairs one verification pass must capture, with a run id, so old screenshots…
- Genre design patternsShort design vocabulary for eight game genres (endless runner, arcade racer, dogfight, tower defense, billiards, mini golf, boss fight…
- Modelling and world recipesParts lists for building convincing models from three.js geometry alone: a hero vehicle, a hero character, obstacle families, rewards and a…
- Render budgets and material kitStarting budgets for a browser 3D scene on desktop and phone (draw calls 300 and 150, triangles 750k and 300k, textures 60 and 40, shadow…
- Visual scorecardA ten-category rubric for judging a real-time 3D picture from 0 to 3 (art direction, hero, obstacles, rewards, world, materials, lighting…
Tools
- bot-playtest.template.tsA Playwright bot that holds keys on a script and measures whether the game really plays: frames advanced, distance moved, score gained, and…
- check_evidence.pyChecks that the screenshots and reports a finished game claims really exist on disk, belong to the current run, are not blank and recorded…
- create_threejs_game.pyCopies the starter into a folder you name and rewrites the project name in package.json and the lockfile. It only copies files; it installs…
- generate_image.pyA small script that sends a prompt, and optionally an image to edit, to Google's Gemini image API and saves a PNG at 1K, 2K or 4K.
- inspect-threejs-canvas.mjsOpens a running page in headless Chromium, checks the canvas is not blank, and measures the picture: color entropy, share of the dominant…
- install.shCopies the nine skill folders into an agent's skills folder in your home directory (Claude Code, Codex, or a shared agents folder) and…