ANIMATED WHITE
CLOUD PARTICLES

Create soft, drifting clouds in the browser with Three.js â€” built from layered smoke sprites that face the camera and slowly rotate.

LIVE DEMO

The soft clouds drifting behind this page are the live demo. Launch it to control the animation.

Introduction

Realistic clouds are surprisingly easy in Three.js. Instead of a complex GPU particle simulation, this tutorial layers about 25 flat planes, each mapped with a soft, semi-transparent smoke texture. Scatter them through space, make each one face the camera, and rotate them slowly — the overlapping transparency blends into soft, volumetric-looking clouds.

It runs fast, looks great, and the whole effect is only a few dozen lines of code. The live demo and full walkthrough below are free; the complete copy-paste code is a member perk.

Frequently Asked Questions

How do you make clouds in Three.js?

The simplest realistic cloud effect uses many flat planes, each mapped with a soft semi-transparent smoke texture. Scatter the planes through space, make each face the camera, and slowly rotate them. Overlapping transparent sprites blend into soft, volumetric-looking clouds.

Why use textured planes instead of real particles for clouds?

A soft smoke texture on a plane already looks like a puff of cloud. Layering 25 to 50 of these transparent, camera-facing planes and rotating them gives a convincing volumetric look for a tiny performance cost, without a complex GPU particle system.

How do you make a plane always face the camera in Three.js?

Call mesh.lookAt(camera.position) so the plane's normal points at the camera. This billboarding keeps each flat smoke sprite facing the viewer no matter where the camera moves, which is what sells the cloud illusion.

Is this Three.js cloud tutorial free?

The live cloud demo running in the background, the full walkthrough, and the step-by-step explanation are free to everyone. The complete copy-paste source code is a member perk: become a member to unlock it along with every other premium tutorial, downloadable source, and 3D assets.

How the Cloud Effect Works

Clouds look complicated, but the trick behind this effect is refreshingly simple: you are not simulating water vapor or running a fluid solver. You are stacking a handful of flat images of smoke on top of each other and letting transparency do the rest. When several soft, semi-transparent puffs overlap, their edges blur together and your eye reads the result as a single soft, three-dimensional cloud — even though every piece is a flat plane.

Three ideas carry the whole technique:

Soft sprites. Each “puff” is a PlaneGeometry with a smoke PNG mapped onto it. The PNG has feathered, semi-transparent edges, so no hard rectangle shows — just a soft blob.
Billboarding. Every plane is turned to face the camera with lookAt(camera.position). Because a flat plane always presents its full face to the viewer, you never catch it edge-on and see that it is paper-thin.
Layered transparency. Scatter 25–50 of these billboards through a small volume of space and give each a slow, independent spin. Where they overlap, the alpha blends and builds up density, which is what sells the volumetric look for almost no cost.

That is the entire illusion: flat pictures of smoke, always facing you, gently turning, blended by transparency. The demo drifting behind this page is doing exactly that in real time.

Why Sprites Beat a Real Particle Simulation Here

A “real” GPU particle cloud — thousands of points, noise fields, volumetric raymarching — can look stunning, but it is expensive to write and expensive to run, especially on phones and low-end laptops. For a background ambience, a logo backdrop, a title screen, or a weather layer in a game, that cost buys you very little that a viewer would notice.

Sprite clouds flip the trade-off. A few dozen textured planes render in well under a millisecond, work on any WebGL device, and need no custom shaders. You get a convincing, soft, moving cloud with code a beginner can read top to bottom. When you genuinely need physically-accurate volume — a flight sim, a scientific visualization — reach for raymarching. For everything else, sprites are the pragmatic, battle-tested choice that real-time graphics have used for decades.

The Smoke Texture Is Everything

The single biggest factor in how good these clouds look is the texture you map onto the planes. A good smoke sprite is a soft white or grey puff on a fully transparent background, with edges that fade gradually to zero alpha rather than cutting off sharply. Hard edges are the giveaway that betrays the flat plane; soft edges hide it.

A few things to get right with the texture:

Transparency matters more than color. Use a PNG (or WebP) with a real alpha channel. A JPG cannot hold transparency, so its black or white background will show as an ugly box.
Soft, feathered edges. The alpha should ramp down smoothly toward the border so overlapping puffs melt into one another.
Keep it neutral. A white or light-grey puff can be tinted any color later with the material, so one texture serves storm clouds, sunset clouds, or magic smoke.
Reasonable resolution. 256×256 or 512×512 is plenty; a huge texture just wastes memory for a blurry blob.

One well-made smoke PNG, reused across every plane, is all the art this effect needs.

Blending, Depth, and Lighting Gotchas

Transparent objects are where most people trip up in Three.js, and clouds are made entirely of transparent objects. A couple of settings make or break the look:

Turn on transparency. The material needs transparent: true or the alpha channel is ignored and you get opaque squares.
Tame the depth buffer. Overlapping transparent planes can fight over which is “in front,” causing flicker or hard seams. Disabling the depth test (depthTest: false) or depth writes is a common fix for soft, layered sprites so they always blend instead of clipping.
Light it, or go unlit. A lit material (like MeshPhongMaterial) needs a light in the scene or the clouds render black. If you do not want lighting to affect them, an unlit MeshBasicMaterial shows the texture at full brightness every time.
Additive for glow. Switching the blend mode to additive makes overlaps brighten toward white — perfect for magical smoke, fog lit from within, or energy effects, though it reads less like a natural grey cloud.

Where You'd Actually Use This

Because it is cheap and self-contained, this cloud technique drops into a lot of real projects:

Atmospheric website backgrounds — a slow drift of soft clouds behind a hero section or portfolio, exactly like the demo on this page.
Game weather and ambience — low-lying fog in a valley, drifting mist over water, or a cloud layer under a flying character.
Transitions and reveals — a puff of smoke that covers a scene change, or clouds parting to reveal a title.
Effects — tinted and animated, the same planes become dust, steam, poison gas, a dragon's breath, or spell smoke.

Once you understand that a “cloud” is just soft, camera-facing, overlapping sprites, you will start seeing the same trick everywhere in games and on the web — and you will know how to build it yourself.

What To Try Next

Increase the loop count to 50+ planes for denser, fuller clouds.
Tint the MeshPhongMaterial with a color for stormy grey or sunset orange clouds.
Lower each plane's opacity (e.g. 0.4) so overlaps blend more softly.
Slowly drift the whole cloud group along X for a windswept sky.
Add colored lights that move to make the clouds shift hue over time.