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 7 of 66Show everything
three.js and WebGL
- 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…
- 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…
- 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…
- 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…
- 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…