Cloth / Flag Simulation

Hello!

I just came across one of your fantastic examples - this one is of Cloth Animation, found here:

https://threejs.org/examples/#webgl_animation_cloth

Unfortunately I see no explanation of the code anywhere - even the comments are sparse, and it’s a lot to take on all at once. (I’m new to THREE.js but I’ve got a good amount of experience coding, so that’s not the issue.)

Can anyone recommend some other, simpler projects that might be good for me to look at in that they introduce some of the topics and techniques used in this one, as a way of “building up” to dealing with this one?

Or does anyone out there do tutoring of THREE js that I could maybe do a one-on-one session with on this?

My challenge is that I’ve got a full work-load and therefore don’t have endless hours to go down a million rabbit holes like I used to in order to figure this out.

Would love to just cut to the chase on this somehow if possible.

Would appreciate any suggestions of guidance.

Thank you!

There do seem to be a few explanation docs linked in the example :eyes:

To write cloth simulation by yourself all you’d need to understand is basically:

  • At least basic physics (forces and how to apply them as 3D vectors is more than enough)
  • Spring / joint / constraint physics (ie. this part and the wiki page linked in the example source)
  • Manual manipulation of vertex position in three (ie. this part, just updating the vertex positions based on the simulated “particles” / joints)

That’d be pretty much all - but code for physics can be lengthy and confusing, so adding explanations directly in the example code would likely turn it into an article about writing physics’ engines. :sweat_smile:

(If, like a reasonable person, you’d like to skip writing physic engine yourself and just want to get a pretty simulation - consider using cannon-es for example. The library is up to date, and also seems to have the cloth example you’re looking for :smiley: )

1 Like

The example is already quite complex.

It may make sense to look at other examples.

From the Collection of examples from discourse.threejs.org

eXtended eXamples noisejs POWERWOLF - @author prisoner849

eXtended eXamples Deforming - @author sciecode

AnimatingVertices

BeginnerExample // … step 07: dynamic geometry

and sandbox => examples THREEf

2 Likes

@mjurczyk @hofk Wow - fantastic resources - thank you!