Any ideas about positioning RigidBody from react-three-rapier?

Questions
1

Hi, I’m currently making a hanger with Id card.

Basically I’m following Vercel’s Id card implementation

While trying to make it responsive, I’m facing that physics world won’t update even re-render occurs.

It seems that Physics World gets cached and doesn’t affected by react state update.

Any advise on this?

On the video, you can see that Band(created with meshline and geometric position set by CatmullRomCurve3) doesn’t gets updated when resize happens since catmull-rom spline data position is determined by RigidBody from react-three-rapier. This is why I’m arguing that physics world isn’t affected by state update.

Btw, following function gets executed when resize gets dispatched.

  function resize() {
    const w = clamp(window.innerWidth, 1020, 1980);
    const h = window.innerHeight;

    (camera as PerspectiveCamera).aspect = w / h;
    camera.updateProjectionMatrix();
    gl.setPixelRatio(window.devicePixelRatio);
    gl.setSize(w, h);
    updateDimension(); // zustand state
    invalidate();
  }

Additionally, ofcourse, IdCard properly subscribes on state properly.

2

Physics sims really don’t like to have their state just rewritten on a per frame basis. The do a lot of state tracking of internal variables over time, that isn’t easy to just reset on a whim, and doing so can sometimes cause simulations to explode.
Read the “warning” section here under “Position”:

That said… usually there is some sort of “motion state” object associated with each rigid body that will need to be “reset” as well… i.e. have the new positions written to it, and in the process you may need to reset velocities and any other forces acting on the bodies to prevent weird side effects. I’m saying this more generally, but the specifics vary from engine to engine.

1 Like
3

Thx for the reply, as you said, it seems its impossible to relocate every physics objects manually on runtime.

What I did is, previously I positioned every objects by passing value to group.

Instead, by positioning every three objects manually by specifing position solved the problem.

1 Like