Three.js Cloth Simulation:
A Waving, Tearable Flag With Verlet Physics

The Short Answer

A three.js cloth simulation is a grid of particles that you move with your own physics code and three.js draws as a single mesh. Each particle remembers where it is and where it was a moment ago (Verlet integration), and invisible threads pull neighbours back to a fixed distance several times per frame. Add wind, pin one edge to a pole, give the threads a breaking point, and you have a flag that waves and tears.

Facts

• The flag behind this page is a live three.js cloth simulation: 640 particles, 2,406 constraints and no physics engine.
• It uses Verlet integration at a fixed 60 steps per second with 14 constraint passes per step.
• Threads snap at 2.6 times their rest length, which is how the flag tears.
• When nobody is playing, an autopilot pulls the flag three times, then it resets.

Why I Built a Flag

I wanted a capture-the-flag style banner, the kind you would plant on a base in a team shooter like Super Soldier Battle, my Three.js browser FPS. A flag that just plays a canned animation looks fine until a player shoots it or runs into it. I wanted one that reacts: it should flap harder in a gust, sag when the wind dies, and tear when something yanks it.

So I wrote one from scratch with no physics engine. The background of this page is that exact flag, on an autopilot that grabs it and pulls three times, then resets.

What Is a Three.js Cloth Simulation?

Three.js has no physics. It draws triangles where you tell it to. A cloth simulation is the code that decides where those triangles go. My flag is a grid of 32 by 20 particles. Each particle is just three numbers for where it is now and three numbers for where it was one step ago. The flag mesh reads the very same array, so when a particle moves, the cloth moves.

The particles in the column touching the pole are pinned: they never move. Everything else is free to fall, blow around and stretch, but only as far as the threads allow.

Verlet Integration in Three.js, in Plain Words

Most game physics stores a position and a velocity. Verlet integration stores two positions instead: now and a moment ago. The difference between them is the velocity. Each step, a particle keeps going the way it was going, a tiny bit slower (I keep 98.5 percent), plus whatever gravity and wind add:

next = now + (now - previous) * damping + acceleration * dt * dt

The magic is what happens after. Every particle is tied to its right and lower neighbour by a thread of fixed length, plus two diagonal braces in each square so the weave keeps its shape. That is 2,406 threads. After moving the particles, I walk every thread, measure it, and nudge both ends so it is the right length again. I do that 14 times per step. Because Verlet has no separate velocity to fix up, simply moving a point is enough: next step it carries the right speed by itself. That is why Verlet is so stable for cloth, rope and ragdolls.

Three.js Flag Simulation: Wind That Looks Real

Gravity alone makes a sad, hanging rag. The wind is three layers. First, a steady push that breathes between gentle and strong using two slow sine waves, plus a gust you can trigger in the demo. Second, a side-to-side wave that starts at zero next to the pole and grows toward the free end, so ripples run from the pole to the tip the way a real flag snaps. Third, every triangle gets pushed along its own facing direction, harder when it turns into the wind. That last trick is what makes the cloth flutter instead of sliding around as one sheet.

Tearable Cloth in JavaScript

Tearing turned out to be the cheapest feature of all. Inside the loop that fixes thread lengths, each thread first checks how stretched it is. Past 2.6 times its rest length, it snaps: one byte flips from 1 to 0 and it stops pulling. Then I rebuild the list of triangles and skip any square that has lost a side. I also remove that square's diagonal braces, otherwise an invisible brace would hold the hole shut.

Pulling is just as simple. When you press on the flag, a raycast finds the nearest particle and that particle follows your mouse or finger on a flat plane facing the camera. The threads around it take all the strain, and if you pull hard enough they let go.

Three.js Cloth Simulation vs a Physics Engine

I reached for Rapier for my rocket lander last week because rigid bodies, contacts and stacking are hard to get right by hand. Cloth is the opposite. Rapier and cannon-es are rigid-body engines with no cloth solver, and Ammo.js soft bodies mean a large download and a lot of settings. A particle-and-constraint cloth is about 380 lines for the whole example, scene included, and every number in it is something you can understand and tune: stiffness is the pass count, toughness is the tear limit, weather is a few sine waves.

The trade-off is honesty about what it is not. My flag does not collide with itself or with other objects, apart from a simple ground check. For a banner, a cape or a net in a game, that is usually fine. three.js also ships an official cloth example in its examples folder if you want a second reference.

How a Cloth Simulation Works, Step by Step

1. Make a grid of particles. Lay out a grid of points for the cloth and remember each point's current and previous position. Pin the points that touch the pole.
2. Tie neighbours together. Join each point to its neighbours with threads of fixed length, plus diagonal braces so the squares keep their shape.
3. Step with Verlet and relax the threads. Every step move each free point by its momentum plus gravity and wind, then pull each pair of points back to the right distance several times.
4. Let threads snap. If a thread is stretched past its breaking point, mark it torn and stop drawing the squares that lost a side.

In a Real Game

A capture-the-flag banner is the obvious use, but the same few hundred lines make capes, sails, nets and rope bridges. If you like team shooters, play Super Soldier Battle free in your browser, or read how I built it.

Frequently Asked Questions