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
Showing 20 of 66Show everything
three.js and WebGL
- Bare brushed metal materialRaw steel that needs the environment map to read as metal. One line of three.js; assumes the environment map setup.
- 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.
- 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.
- 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…
- 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…
- 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.
- Polygon-offset decalsA flat mesh laid on a surface with polygonOffset so it does not flicker: panel lines, numbers and marks.
- 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…
- Rubber materialNear-black, almost no reflection, for tyres and grips. One line of three.js; assumes the environment map setup.
- 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-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…
- Vertex-colour ambient occlusionDarkens creases by baking a color attribute into the mesh: contact shading with no texture and no extra draw call.