Hi, I’m interested in learning about cloth physics in three.js. I have a gltf and would like to apply cloth physics, what are the general steps that I need to take? It does not have to be specific, I just want to know what I need to research.
Thanks
3 Likes
There is one official example related to cloth simulation:
https://threejs.org/examples/physics_ammo_cloth
However, it is not really documented. Here are some resources that might be worth to study e.g.
Cloth rendering is a very specific area of 3D rendering so it will be hard to find beginner friendly tutorials. The scientific papers about cloth rendering mostly assume prior knowledge in this area and computer graphics in general. You have to be really brave when diving into this topic^^.
5 Likes
You’re right… it does appear very complicated. I notice that the 2nd demo you provided is made with help from ammo.js. Using ammo.js, it should be simple for beginners like me who have no experience with physics but want to achieve physics? If so, I think I will start there…
If you can settle for ‘baking’ an animation in Blender and playing it back as animation, then these threads might help: https://blenderartists.org/t/export-bezier-curve-animation-as-gltf-and-or-fbx/1151423/4 + https://blender.stackexchange.com/questions/51230/cloth-bake-save-frames-in-timeline-as-shape-key. But I don’t know of a general-purpose workflow for simulating cloth realtime from a custom model.
3 Likes
Hello, I’m the author of the Three.js Ammo examples. You have all what you need in the webgl_physics_volume demo:
The function createSoftVolume( bufferGeom, mass, pressure ) will create a soft body with the given BufferGeometry, the mass, and an internal air pressure value. A soft body is the type of body wich can deform, as opposed to the rigid bodies.
Of course you want to keep all the other functions related to physics in the example.
- You can give the function a BufferGeometry loaded from gltf.
- The mass is up to you (the best is to use meters, seconds and kilograms for all the length, time and mass units)
- Finally, for simulating cloth you can use 0 as the pressure. If you give a positive pressure the cloth will inflate like a balloon even if it is a not closed mesh. (Edit: To clarify, the cloth can be an open, double-sided rendered mesh)
Then, you can also stick the cloth to the person model at some vertices, with the so called anchor points. See the webgl_physics_cloth example, where the function softBody.appendAnchor() is used to glue the cloth to the crane arm. You can add anchors to a soft body, linked to a rigidBody or fixed in thin air.
6 Likes
@yombo Thanks for your explanations! In this forum, we always try to recommend reading materials for the interested developer or student. Do you know any good books or publications in context of cloth rendering/physics? If so, it would be great to add these resources to the three.js bookshelf 
3 Likes
You’re welcome 
Sorry, all I’ve learnt about physics engines is from reading Bullet examples and its internal code.
(Bullet is the C++ original library, Ammo is the port of Bullet to js via Emscripten)
A good place is the Bullet documentation: Bullet Collision Detection & Physics Library: Bullet Documentation
and the Bullet forums: Real-Time Physics Simulation Forum - Index page
4 Likes
Added to the bookshelf + libraries and recommended book from amazon
2 Likes
Thanks @yombo
1 Like
Hello,
I have been banging my head against this all afternoon trying to figure out how to get the BufferGeometry from the GLTF file to parse into the createSoftVolume( bufferGeom, mass, pressure) function.
Trying to create custom soft body meshes as well. Any help would be much appreciated!
Best,
O.
1 Like
I’ve been using this library called geometry modifier that works pretty well for cloth simulation.
I’m Currently using it to animate a flag in my mobile game I’m developing.
https://codepen.io/b29/full/LoaRKx
2 Likes
Oh cool! ty for posting that! I will give that a try. I am wondering if the performance is good enough to have a few of those going at once. I am looking for a solution for moving hair, skirts, etc on avatars.
What problems did you encounter? A fiddle could help.
With the function you can convert any mesh to soft body, in theory.
1 Like
It was a silly error - it is actually surprising easy to use the function to create geometry from a gltf model. I was just not allowing the model to load before calling the function - all is working well now.
Thanks for an awesome tool!
2 Likes
Hi @R_D
Off the top of my head - as explaioned above - I waited for the geometry to load before calling the create geometry function.
ie. loader.load('model.gltf', function(){ ... })
1 Like
Hello, I want to add physical fabric to FBX character model clothes but don’t know how to do it
Import the FBX model into the createOftVolume function and the page becomes very sluggish
@Gonaldo7 I would recommend starting a new discussion thread, including more details about your code and model.
@donmccurdy I have posted it before, but no one discussed it.So I had to look in the comments to find out, the clothes in the FBX character model didn’t know how to fit the fabric pattern
It is a very broad question, with not enough information to answer it. To me it sounds like you may want to be using modeling software like Blender instead? That is a much better way to do most changes to existing 3D models.