Cloth Simulation in ThreeJS

Learn how to create cloth simulations using constraints in threeJS and CanonJS. Inspiration, learning resources, and demos from creative websites.

A cloth simulation, at least CannonJS, is not much different than a string or a rope. Instead of connecting a single line, you constrain a whole grid of points vertically and horizontally.

So, you create a plane with 8x8 segments, you need to create constraints with their direct neighbors.

If you want any static points, in this week's demo all edges are static, you set their mass to 0 making them unable to be moved by physics.

Getting started


Hero Cloth Animation

To apply wind to a cloth simulation like in this example, you sample noise to apply forces to each point semi-randomly.

And to set static points, like the ones at the top holding the cloth, their mass is set to 0.

Hero cloth simulation

Verlet Cloth simulation

Cloth simulations might sometimes seem similar to fluid simulations because of the propagation. Every point is constrained to each other. So, if you pull on me, you pull on my brothers and sisters as well.

This simulation by Jordan in particular works so well because it uses the GPU to do its Verlet integration. It uses a matcap and normal map to make the result look incredible.

Verlet Integration is a fancy way of making sure the force/energy is conserved when the simulation runs.

Verlet implementation of cloth in the GPU

Verlet Plane simulation

This is another Verlet simulation, this time running in the CPU. However, this demo simulates a few grid points for physics but constructs a geometry using NURBS with those points.

NURBS is a spline that's commonly used to represent curves and surfaces with more control than a Bezier Curve. This type of spline is used for representing curves accurately and it's used by programs a lot of the biggest modeling programs because of that.

CPU cloth simulation reconstructed with nurbs

Further reading / Inspiration