Three.js Cloth Simulation Part 2:
Wave a Flag in the Wind

PART 1 → PART 2

Start here first: Part 1, Hang a Verlet Cloth Sheet

New to cloth? Do Part 1 first. It builds the 32 by 20 particle grid, the threads and diagonal braces, and the Verlet solver as a sheet hanging from a bar, drawn as dots and threads. This page keeps that code and world and adds the new lesson on top.

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

A three.js flag simulation is a Verlet cloth pinned along one edge to a pole and pushed by a wind force every physics step. The particles also drive a textured BufferGeometry; recomputing its normals every frame lets the sun shade each fold, so the waving cloth reads as a real banner.

Introduction

Prerequisite: Part 1: Hang a Verlet Cloth Sheet. The sky, ground, rocks, particles, threads and solver all carry over, so this page focuses on what is new.

In Part 2 the cloth from Part 1 becomes a flag. The world is the same (sky, fog, lights, ground and rocks), and so are the particles, threads and solver. What changes: the bar becomes a flag pole and the pins move from the top row to the left column, a wind force with gusts and a travelling ripple pushes every particle, and the dots and threads are replaced by a shaded mesh with a painted banner texture.

It is the kind of prop I like for team shooters such as Super Soldier Battle, my Three.js browser FPS. Part 3 adds the last piece: tearing it apart.

What's New Compared to Part 1

• A flag pole instead of the bar: the left column of particles is pinned to the pole, not the top row.
• Wind and gravity: a wind that breathes between gentle and strong, Space gusts, and a ripple that travels from the pole to the tip.
• A triangle wind force: parts of the cloth that turn into the wind catch more of it, which makes the flutter.
• A shaded mesh: two triangles per square, UVs and a painted banner texture on a MeshStandardMaterial, with computeVertexNormals() every frame so the sun lights each fold.
• Forces in an array: the Verlet step now reads a per-particle acceleration array instead of a fixed gravity value.

What You'll Learn

• How to pin a cloth to a flag pole by pinning one column of particles
• How to build a wind force that changes over time, with gusts and a travelling wave
• How a per-triangle normal force makes the cloth flutter where it faces the wind
• How to drive a textured BufferGeometry straight from the simulation Float32Array
• How recomputing vertex normals every frame gives moving cloth real shading
• How to paint a banner texture on a canvas with CanvasTexture

Prerequisites

• Finish Part 1: Hang a Verlet Cloth Sheet first; this part reuses its particles, threads and solver
• Basic Three.js: scene, camera, renderer, a mesh and a material
• Helpful: the free Three.js Cloth Simulation article

Facts

• The flag is the same 640 particles (32 by 20) and 2,406 distance constraints as Part 1; the 20 particles on the pole are pinned.
• The wind strength breathes between about 5 and 17 (two sine waves) plus a gust that fades out; an automatic gust arrives every 5 to 9 seconds.
• The mesh is 1,178 triangles that read the simulation array directly; normals are recomputed every frame for shading.
• Physics runs at a fixed 60 steps per second with 14 constraint passes per step and 0.985 velocity damping.
• No physics engine is used. The example is one HTML file, about 320 lines of JavaScript, using three.js r160 from unpkg.

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) — 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.
6. The Flag Mesh and Its Banner Texture — In plain words: we paint a red, navy, white and gold banner on a canvas and wrap it on a mesh that shares the particle array. This replaces the Part 1 dots and threads.
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.
9. Gusts, Reset and Keys — In plain words: every 5 to 9 seconds a gust blows on its own. Space sends a gust now and R lays the flag out flat again.
10. 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

• Change the weather. Edit the numbers in updateWind() for a calm day or a storm, and the gust value for stronger Space gusts.
• Paint your own flag. Change the colours and shapes in makeBannerTexture(); the UVs map the whole canvas onto the cloth.
• Reuse the pattern. The same pinned cloth plus wind makes capes, sails, curtains and banners for a game.