Cloth physics to gltf

Questions
,
25

If I made a dress in MD or Blender and put it on a character model and exported it in FBX mode, how do I get the clothes on the model to display the correct physical properties of the fabric on the web page.

let loader = new FBXLoader(),
							geo = null;
					loader.load( '/models/wutai/man2.fbx', function ( object ) {
						object.traverse(function(child) {
								if (child.isMesh) {
									if(child.name.indexOf('body') !== -1) {
										child.material = deepTexture ("/models/wutai/texture/body@0002.jpg") 
									} else {
										// cloth
										geo = child.geometry
									}
									child.castShadow = true;
									child.receiveShadow = true;
								}
						});
						scene.add(object)
						createSoftVolume(geo , 15 , 500)
26

By “physical properties” do you mean animation, shape, and movement of the cloth? Or the material appearance and color?

The first is extremely hard, there is no short answer to that question. The second requires PBR materials, which Blender can export but FBX does not really support well. It is better to use glTF for PBR materials.

27

Yes, it’s hard to estimate the fabric properties of the clothes when the character model is on the runway.

28
  • Hello, I used the library modifiers, but I got an error
    My code:
  • ‘Cloth’ defines Geometry in the FBX model
let mesh = new THREE.Mesh( cloth, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
modifier = new ModifierStack(mesh);

Print an error

Cannot read property 'count' of undefined
29

hi, how do you mean by fiddle. The gltfloader?

30

B"H

Cloth animation no longer active

only using the ammo library

1 Like
31

Thanks for highlighting. I’ve updated the comment.

32

B"H
is there any other example of how to do it tho?

33

There are no new examples related to cloth physics since the topic has been originally created.

34

I created youtube tutorial on physics in three.js using ammo.js while back
The motive behind creating that tutorial was to showcase how one can have dynamic cloth collision with GLTF model using ammo.js wrapper because here very few resources out there for ammo.js

link: https://youtu.be/1cCE7OjXwuk?si=CPJXt4tNiOq5op67

35

look at https://codepen.io/daniil-falin/pen/yLxpYmz

it uses the first glb of a bird… looking for mesh in the glb, it finds the bird mesh. for other glb, i have had to scale the read in mesh [ near my SCALE comment]. it takes a few seconds, but may help

1 Like
36

oh, other code https://codepen.io/richardengle/pen/ZYEjRPo

37

Oh that’s really helpful, thank you!