Skip to content
Get packs

Three.js Weather Effects

Gives an agent know-how to build believable rain, storms, lightning, snow and wet ground in Three.js scenes

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent gets a detailed playbook for adding weather to a 3D web scene built with Three.js, a popular JavaScript library for browser graphics. It covers keeping rain inside the camera view, making storms by intensifying the rain system, lightning with thunder timed by distance, blizzards that build and ease, snow that accumulates on the ground, wet puddles and splashes, and seamless looping ambient audio. It mainly guides how code is written; it does not itself render anything.

Great for

  • Front-end developers building atmospheric hero backdrops or interactive 3D web scenes
  • Creative coders who want weather states (clear, rain, storm, snow) the viewer can switch between
  • Designers working with a developer on mood and seasonal states for a web experience

Skip it if

  • Projects that do not use Three.js; the patterns are specific to that library and will not transfer directly to other engines
  • Simple static pages where a CSS or video background would do, since this adds real rendering cost and complexity
  • Anyone expecting a ready-to-use weather widget that shows real forecast data; the skill is about visual effects, not live weather

Try asking

  • “Add a rain system to my Three.js scene that stays inside the camera view and can be switched to a storm”
  • “Create lightning flashes with thunder delayed by distance for my landing page backdrop”
  • “Build a snow state where the ground gradually whitens the longer it snows”
  • “Add puddles and splash rings to my wet ground in a Three.js scene”
Step-by-step guide: how to use Three.js Weather EffectsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    threejs-weather.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip threejs-weather.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip threejs-weather.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the target runtime and Three.js version in your request so the agent adapts the code correctly
  • Ask for one weather state at a time (for example rain first, then storm) to keep the integration easy to test
  • Review generated audio and shader code before shipping, since the examples include sound timing and GLSL snippets that must be adapted to your project

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.