Three.js Cloth Simulation Part 1:
Hang a Verlet Cloth Sheet

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. Each particle keeps its current and previous position (Verlet integration), and neighbours are held at a fixed distance by distance constraints that you relax several times per step. Pin one edge, add gravity, and the grid hangs and swings like fabric.

Introduction

In Part 1 of this three-part series I build the simplest cloth that still behaves like cloth: a 32 by 20 grid of particles tied together with threads, pinned along its top edge to a metal bar, and pulled down by gravity. It starts lying flat, sticking straight out from the bar, then swings down, overshoots and settles, which shows you every part of the solver at work.

The cloth is drawn as dots and threads on purpose. You see each particle and each straight thread, and the pinned top row is gold, so nothing is hidden behind a texture. Part 2 swaps that view for a shaded flag on a pole in the wind, and Part 3 makes the flag tearable. Everything is plain JavaScript you can read; three.js only draws it.

What You'll Learn

• How Verlet integration moves a particle using only its current and previous position
• How to store 640 particles in flat Float32Arrays that the renderer can read directly
• How distance constraints (straight threads plus diagonal braces) turn a grid of points into cloth
• How pinning a row of particles ties the cloth to a bar
• How to draw the simulation with THREE.Points and THREE.LineSegments that share one position buffer
• How a fixed-timestep loop keeps the physics the same at any frame rate

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 Three.js Cloth Simulation article, which explains the ideas without code

Facts

• The sheet is 640 particles (32 by 20) joined by 2,406 distance constraints: 1,228 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.
• The only force in Part 1 is gravity (-9.8 metres per second squared); the top row of 32 particles is pinned to the bar.
• The cloth is drawn with THREE.Points and THREE.LineSegments that read the same Float32Array the physics writes to.
• No physics engine is used. The example is one HTML file, about 250 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 cloth has a place to hang.
3. The Hanging Bar — In plain words: two metal posts with gold caps and a crossbar between them. The top edge of the cloth will be tied to the bar.
4. Cloth Particles: Positions, Previous Positions and Pins — In plain words: the cloth 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 top row is pinned so it never moves.
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. Drawing the Cloth as Dots and Threads — In plain words: we draw one dot per particle and one line per straight thread, and both read the same array the physics writes to. The pinned dots are gold.
7. Gravity, Verlet Integration and Constraint Solving — In plain words: move every free dot by its own momentum plus gravity, then pull each pair of dots back to the right distance 14 times.
8. Drop Again on a Timer, Reset and Keys — In plain words: every 7 seconds the sheet is laid out flat again and drops. Space or R drops it right away.
9. 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 dots, the threads 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 drop. Edit layoutParticles() so the sheet starts hanging straight down, or tilted, and watch how it settles.
• Tune the feel. Lower ITERATIONS for stretchy jersey, raise it for stiff canvas, and change DAMPING to make the swing die out faster or slower.
• Pin something else. Pin only the two top corners (r === 0 && (c === 0 || c === COLS - 1)) and the sheet droops like a hammock.