threejs-weather

Three.js Weather

Weather fails in two ways: the particles miss the camera entirely, or every state is a separate system that shares nothing. Both are avoidable.

Pairs with threejs-landscape for the ground it falls on, and threejs-towers for something to fall against.

Anchor the volume in the frustum

The first version of any rain system puts a world-sized box of particles around the origin and looks empty. With a long lens the camera sees a narrow cone, so almost every drop is off-camera.

Build a small volume and carry it in front of the camera, facing the way the camera faces:

const WX_W = 17, WX_D = 50, WX_TOP = 40;         // narrow, deep, tall
function anchor(o) {
  const fx = -Math.sin(camAz), fz = -Math.cos(camAz);
  o.position.set(cam.position.x + fx * 46, 0, cam.position.z + fz * 46);
  o.rotation.y = camAz;
}

Set frustumCulled = false on it — you are moving it every frame and the bounding sphere will fight you.

Float32BufferAttribute copies your array

This one costs an afternoon. The attribute takes a copy of whatever you hand it, so the array you kept a reference to is not the one the GPU reads:

const attr = new THREE.Float32BufferAttribute(pos, 3);
attr.setUsage(THREE.DynamicDrawUsage);
geo.setAttribute('position', attr);
return { pts, pos: attr.array, n };              // keep the attribute's array

Symptom: everything is correct, nothing moves, no error anywhere.

Density is a draw range, not a new buffer

Allocate the worst case once — a full storm, a full blizzard — and thin it by drawing less:

RAIN.geo.setDrawRange(0, Math.round(RAIN.n * density));

A storm then costs no more memory than drizzle; it just stops hiding most of the drops. Reallocating buffers when weather changes causes a hitch exactly when the viewer is watching.

A storm is the rain leaned on

Do not write a second particle system. Take the rain state and push every dial:

	rain	storm
drops drawn	60% of pool	100%
fall speed	×1.0	×1.42
slant	2.4	scales with speed²
sun	30%	14%
fog far	×0.52	×0.38