Environment effects for Three.js & React Three Fiber

The environment objects are weather you place in a scene: Rain, Snow, Sandstorm, Rainbow, Tornado and Thunderstorm. Each one fills a box-shaped volume that you size and move like any other object, so a storm can sit over one valley while the rest of the scene stays clear. They are separate from the scene-wide environment settings for sky, sun, clouds, ocean and fog, and they work with them: the snow is lit by the sun and the sky, and a thunderstorm's flashes light the whole scene.

What's in the family

• Rain: streaks falling through the volume, pushed sideways by the wind and scattered by turbulence.
• Snow: flakes that fall faster the bigger they are, flutter and tumble, and glint in the sun, swept into curtains by travelling gusts.
• Sandstorm: billowing dust, towering walls of dust rolling downwind, and sand grains hopping along the ground. For deserts, ash and Mars.
• Rainbow: a single bow centred opposite the sun. Drop Size changes it from a narrow, vivid bow to the pale fringes of small drops and the white fogbow of mist, and Secondary adds the second, reversed bow outside it.
• Tornado: a funnel on a wandering, rope-like axis, with streaks winding up it and ground dust spiralling in around its foot.
• Thunderstorm: dark storm curtains drifting on the wind and lightning flashes at random intervals. It has no rain, so add Rain alongside when you want both.

Shared settings

The weather objects share a vocabulary. Density sets how much there is, Wind Strength and Wind Direction push it, Turbulence roughens it and Speed sets the time scale. Color and Shade Color set the lit and shaded sides. Most also have a Quality setting for slower devices and a Seed for a different layout with the same character. Follow Camera keeps the weather around the camera wherever it goes, so a fly-through never reaches the edge of the snowfall.

The cursor

Every weather object except rain gives the cursor a physical role, shown live on the page:

• Snow: a gust of air, a shelter the snow slides off, or a warm hand that melts it.
• Sandstorm: a windbreak with still air behind it, a dust devil, or a gust.
• Tornado: the cursor steers its foot, feeds its inflow, or bends it with a gust.
• Rainbow: a mist spray that brightens the bow, a clearing that wipes it, or a polarising filter.
• Thunderstorm: sweep to call a strike, or clear a path through the murk.

Pointer Strength and Pointer Radius set how hard and how far.

Use it for

Moody product launches in the rain, winter campaigns, desert and Mars worlds, storm-chasing drama, and hopeful after-rain hero shots with a rainbow. Weather is also the quickest way to give an empty scene a season and a mood.