Cloth simulation with CannonJS

Questions
,
1

I’m trying to create a cloth simulation using @react-three/fiber and @react-three/cannon.

I created particles that respond to physics. However, I would like to reproduce this behavior on cloth. However, I can’t get the effect.

 useFrame(() => {
    if (particles.current[0][0]) {
      const geom = meshRef.current.geometry;
      const positions = geom.attributes.position.array;

      positions.forEach((v, vi) => {
        let x = vi % RESOLUTIONX
        let y = Math.floor(vi / RESOLUTIONX)
        if (particles.current[y] && particles.current[y][x].current) {
          geom.attributes.position.setXYZ(vi, ... particles.current[y][x].current.particle.current.position.toArray())
        }
      })


      geom.attributes.position.needsUpdate = true;
      geom.computeVertexNormals();
    }
  });

Sandbox
enter image description here

1 Like
2

Sandbox is inaccessible due to access perms…

3

It should work now: Sandbox

1 Like
4

I stuck some console.logs in there… and the one inside the useFrame wasn’t firing.
Not sure if things are wired up correctly, or if its something in the sandbox?

fwiw… Your code looks totally plausible, like it should be doing the right thing ™

5

Hmm, I updated the sandbox and the console.log seems to work :thinking:

6

Yeah. Unfortunately the nature of r3f makes it difficult for me to debug and track down exactly what is happening. Also that sandbox is running in a sort of web VM which is an additional layer of obscurity.
I can tell you that the way that you are updating the geometry from the data looks roughly correct.
I’d suggest you take this into the r3f discord and ask them there: Poimandres
They should be able to sort this out…