Elastic material

Questions
1

Hi, I want my .glb file to make interactive on click and drag like in this website Adult Swim - Elastic Man

Can you please help me? I do not know where to start.

2

Hi!
The closest I can recall is this codepen from @sciecode

8 Likes
3

Yep, I haven’t seen many other examples of cloth/elastic simulations out there. The codepen Paul showed is an old example where the integration is done on the CPU, however I do have this version:

Which is slightly more involved, but it does the integration using shaders and is a lot more performant. However, depending on your intended model, you might have a hard time simply drag and dropping it, Because the algorithm relies internally on a model which has at most 6 connections for each vertex.

3 Likes
4

Hey @sciecode, thank you for this example, I love it!
I tried to load a gltf model and use its geometry instead of new THREE.IcosahedronBufferGeometry( 1000, 5 );.
I already thought that it wouldn’t work and that’s the way it is. Is it even possible to use your own geometries without rewriting major parts of the code? I would love to use it with a gltf model and customize it to my needs. Maybe you have a hint for me?
Best regards,
Phil

5

Looks like the magic in that elastic man example happens here:

https://d21u3ic0kp9e91.cloudfront.net/elasticman/0/face.js

It looks like an emscripten compiled simulation running against webGL.
There appears to be a lot of code explicitly locating the different parts of the model, face, ears, eyes, hair, etc.

If someone asked me to make this, I would probably use something like this, because I don’t have a planet sized brain to roll my own simulation like @sciecode :smiley: :

https://threejs.org/examples/physics_ammo_volume.html

6

Dude… this is a gorgeous demo. Amazing.

7

Hello, @sciecode
I have the same question with @philszalay.
Could you please give us some hints?

Thank you!

8

Hello, Paul.
Can you please share the code with updated Three.js package?
I can’t find geometry.vertices and geometry.faces in recent Three.js geometry.
This part from the codepen code.

let geometry = new THREE.SphereGeometry(100, 50, 50);

      for (let i = 0; i < geometry.vertices.length; i++) {
        let t = geometry.vertices[i];
        particles.push(new Particle(t.x, t.y, t.z, 0.1));
      }

      for (let i = 0; i < geometry.faces.length; i++) {
        face = geometry.faces[i];
        if (
          !particles[face.b].adj.includes(face.a) &&
          !particles[face.a].adj.includes(face.b)
        )
          particles[face.a].adj.push(face.b);
        if (
          !particles[face.c].adj.includes(face.a) &&
          !particles[face.a].adj.includes(face.c)
        )
          particles[face.a].adj.push(face.c);
      }