threejs-weather

Implements rain, storms, lightning, and blizzards as unified particle systems in Three.js scenes.

5.7k|685|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/MengTo/Skills --skill threejs-weather
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-weather
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/threejs-weather
Command: npx skills add https://github.com/MengTo/Skills --skill threejs-weather

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes assets (resource) components.

What problem does it solve?

Weather effects in Three.js scenes typically fail in two ways: particle volumes sit outside the camera frustum so nothing is visible, or every weather state is built as a separate system that shares nothing. This Skill provides a proven architecture for rain, storms, lightning, and snow that reads as real weather.

Core Features & Use Cases

  • Frustum-anchored precipitation: Carry a narrow particle volume in front of the camera with frustumCulled = false, and thin a single fixed pool with setDrawRange instead of reallocating buffers.
  • Unified storm and blizzard logic: A storm is the rain state pushed harder (density, speed, slant scaling with velocity squared), and a blizzard is a slow calm/build/blow/ease envelope over the snow state, not separate systems.
  • Lightning and settled snow: A dedicated directional light with multi-pulse flashes and distance-delayed thunder, plus a separate snow-pack variable that whitens ground, stones, and shader-mixed grass over time.
  • Use Case: Add a clear/rain/storm/snow control to a hero backdrop or 3D landing page where the viewer can orbit the scene and watch a blizzard arrive, pass, and leave the ground visibly whiter.

Quick Start

Use $threejs-weather to add rain, a storm with lightning, and snow that settles to this Three.js scene.

Frequently Asked Questions about threejs-weather

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add rain to a Three.js scene that is actually visible?

Anchor a small, deep particle volume in front of the camera and rotate it to face the camera direction, with frustumCulled set to false. A world-sized box of particles puts almost every drop outside the narrow cone a long lens sees.

How do I make a storm effect from an existing rain system in Three.js?

Reuse the rain pool and push every dial: draw 100% of drops instead of 60%, increase fall speed, and scale slant with velocity squared so it reads as wind. Thinning density with setDrawRange means a storm costs no more memory than drizzle.

Why do my Three.js particles not move after updating positions?

Float32BufferAttribute copies the array you pass it, so writing to your original array never reaches the GPU. Keep a reference to attr.array and update that instead, with DynamicDrawUsage set on the attribute.

How do I make snow accumulate on the ground in Three.js?

Track settled snow as a separate variable on a slow timer, rising while snow falls and melting back when weather changes. For shader-mixed surfaces like instanced grass, add a dedicated uniform since material color cannot reach colors mixed inside the shader.

How do I sync thunder with lightning flashes in a WebGL scene?

Delay the thunder sound by distance, roughly 0.32 seconds for near strikes up to about 3 seconds for far ones, and lower the gain the longer the delay. This single correlation is what makes a strike feel far away.

Why does my Three.js scene stutter when weather changes?

Relighting the scene every frame while blizzard strength and snow depth drift continuously is expensive. Gate the relight behind a threshold check on the slow values so it fires a few times a second instead of sixty.