Softbody physics applied to website

Using a more or less similar approach as the ThreeJS cloth example, this scene applies softbody physics on several objects to mimic a slightly breezy day.



Hello, how is this made

This scene is made using ThreeML that allows instantiating ThreeJS objects in a declarative way., There is a way to have any mesh be flexible, and you can specify how it stretches’, reacts to wind etc.

  • What is the solution to making the grid flexible

The approach is somewhat similar as here: three.js examples (
You make a local array of the vertices of the mesh, and which particles are neighbours. Then every frame you calculate new positions based forces (wind, stretch, gravity etc.) and overwrite the geometry buffers.

An extra step when not dealing with a plane geometry is to initially determine which vertices represents the same point of a mesh, otherwise the mesh will tear open along the seams during the simulation.

In ThreeML the initial configuration is done in the handleSoftBody() function at ~2513, if you want to have a look at it. In the animationloop the function simulateSoftBody(obj) is called for every frame to apply the force constraints.


But I have a FBX character model and I need to apply fabric simulation to the clothes on the character model. How do I connect this

I’m not sure it is suitable for that. ‘Fabric on a character’ often implies it needs self collision and/or collision with other complex geometries.