Three.js Cloth Simulation Tutorial:
Build a Tearable Wind Flag

What Is a Three.js Cloth Simulation? (Quick Definition)

A three.js cloth simulation is a grid of particles moved by your own physics code and drawn by three.js as one mesh. Each particle keeps its current and previous position (Verlet integration), neighbours are held at a fixed distance by constraints you relax several times per step, and the mesh reads the same position array every frame. Give those constraints a breaking point and the cloth can tear.

Introduction

In this tutorial I build a capture-the-flag style banner from scratch: 640 particles tied to a pole, pushed by gusty wind and a ripple that runs to the tip, and torn open wherever you grab it and pull. There is no physics engine. Every line of motion is plain JavaScript you can read and tune, and three.js only draws it.

It is the kind of prop I like for team shooters such as Super Soldier Battle, my Three.js browser FPS. Want the why before the how? The free article Three.js Cloth Simulation: A Waving, Tearable Flag With Verlet Physics explains the ideas without code.

What You'll Learn

• How Verlet integration moves a particle using only its current and previous position
• How distance constraints, relaxed 14 times per step, turn a grid of points into cloth
• How to pin the cloth to a pole and push it with gravity, gusty wind and a travelling wave
• How to make threads snap past a stretch limit and open real holes in the mesh
• How to grab and drag a particle with a Raycaster and pointer events (mouse and touch)
• How to drive a BufferGeometry straight from a Float32Array and rebuild its index on a tear

Prerequisites

• Basic Three.js: scene, camera, renderer and a mesh
• Comfortable with ES modules and an importmap (no build step needed)
• Helpful first: the free Ball vs. Wall collision events tutorial, and the free article Three.js Cloth Simulation

Facts

• The flag is 640 particles (32 by 20) joined by 2,406 distance constraints: straight threads plus two diagonal braces per square.
• Physics runs at a fixed 60 steps per second with 14 constraint passes per step and 0.985 velocity damping.
• A thread tears when it is stretched past 2.6 times its rest length (rest length is 0.15 m for straight threads).
• No physics engine is used. The example is one HTML file, about 380 lines of JavaScript, using three.js r160 from unpkg.
• Mouse, pen and touch all tear the flag through pointer events; Space sends a wind gust and R resets.

Frequently Asked Questions

How It Works

1. Imports, Scene, Camera and Renderer — In plain words: we load three.js and OrbitControls, make a scene and a camera, and put a full-page canvas on the screen.
2. Lights, Ground and Rocks — In plain words: we add a sky light, a sun that casts shadows, a green ground disc and a few rocks so the flag has a place to stand.
3. The Flag Pole — In plain words: a metal cylinder with a gold ball on top. The cloth will be tied to it.
4. Cloth Particles: Positions, Previous Positions and Pins — In plain words: the flag is a 32 by 20 grid of dots. For each dot we remember where it is now and where it was one step ago, and the dots touching the pole are pinned so they never move.
5. Distance Constraints (the Threads) and the Tear Limit — In plain words: every dot is tied to its right and lower neighbour by a thread of fixed length, plus two diagonal braces per square. A thread stretched past 2.6 times its length snaps.
6. The Flag Mesh and Its Banner Texture — In plain words: we paint a red, navy, white and gold banner on a canvas, wrap it on a mesh that shares the particle array, and only draw a square while all four of its threads are intact.
7. Wind and Gravity — In plain words: every step the wind changes a little. Each dot gets gravity, the wind, and a side-to-side wave that grows toward the free end; each triangle also gets pushed along its normal when it faces the wind.
8. Verlet Integration and Constraint Solving — In plain words: move every free dot by its own momentum plus the forces, then pull each pair of dots back to the right distance 14 times. Any thread stretched too far snaps instead.
9. Click or Touch and Drag to Pull and Tear — In plain words: when you press on the flag we grab the nearest dot and drag it along a flat plane facing the camera. Pull hard and the threads around it snap. A press that misses the flag is handed to OrbitControls, so a mouse-drag or a finger-drag on the empty scene orbits the camera.
10. Autopilot, Reset and Keys — In plain words: if nobody touches anything for eight seconds a ghost hand grabs a random spot and yanks it, three times, then the flag resets. R resets now and Space sends a gust.
11. Fixed-Timestep Loop, Camera Framing and HUD — In plain words: physics always runs in 1/60 second steps, whatever the screen's frame rate; then we update the mesh, its normals and the readout, and draw. Behind the page text the camera slowly auto-orbits. In the live demo, OrbitControls takes over so you can orbit with a mouse drag or a finger.

That's the shape of the build. The detailed code breakdown for every step and the full copy-paste file are below. Members unlock them.

How To Use It

• Rip it on purpose. Grab the middle and pull fast toward the camera, then try a slow pull and see how far it stretches first.
• Tune the feel. Lower TEAR for tissue paper, raise ITERATIONS for stiff canvas, change the wind numbers for a calm day or a storm.
• Reuse the pattern. Particles plus distance constraints also make rope, chains, nets, capes and soft banners for a game.