How to sync @react-three/rapier RigidBody with scroll #50
-
|
Hello and thank you for such wonderful library! 😊 I'm experiencing synchronization issues between a mesh and its RigidBody collider when using @react-three/rapier with r3f-scroll-rig. The mesh position doesn't properly sync with the physics collider specially during scroll. Reproduction
Environment
Questions
Any guidance or suggestions would be greatly appreciated! Thank you very much in advance! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Hi @emilianoglucero - that's a fun challenge and I believe there might be different ways to achieve it. I did some hacking with this setup a few years ago and this is the best I came up with: https://xiz6zy.csb.app/ Basically you should not wrap your physics scene in a ScrollScene because that will move the whole physics world. Instead, wrap your canvas children in the physics world - and then when scrolling you need to manually move the rigid body using impulses or translations. So the scrolling itself becomes part of the physics simulation. In this example the balls are all free falling, but the Cup objects are moved with Here are the relevant lines of code: You might be able to use your approach too and scroll the entire Physics world but I'm not sure why you get that offset - and the pointer also doesn't match the mouse location since you would have to account for the scroll position. |
Beta Was this translation helpful? Give feedback.
Hi @emilianoglucero - that's a fun challenge and I believe there might be different ways to achieve it.
I did some hacking with this setup a few years ago and this is the best I came up with: https://xiz6zy.csb.app/
Basically you should not wrap your physics scene in a ScrollScene because that will move the whole physics world.
Instead, wrap your canvas children in the physics world - and then when scrolling you need to manually move the rigid body using impulses or translations. So the scrolling itself becomes part of the physics simulation.
In this example the balls are all free falling, but the Cup objects are moved with
setNextKinematicTranslationto sync with the scroll.Here are the…