How to update radius args in useCircle hook?

[shenghan97]

Hey!

I was trying to update the radius args of a useCircle hook with react three fiber but running into some problems.

My current solution is to create a useState hook and store the radius inside of it. The radius state get updated (set state function) in useFrame hook. And finally make the radius state as a dependency of useCircle hook. Whenever the radius state gets updated in useFrame hook, the useCircle hook then got updates with new radius, and picking up the velocity and position in the current frame.

This solution work, but not very performant - on my m1 Mac mini, it runs fine in chrome but extremely jaggy on safari. I suspect the reason is that I call the set-state function in useFrame hook, which is explicitly advised against in r3f's documentation. However, I couldn't figure out another way to update radius.

Is there any other way I can trigger the dependency updates of args in a useCircle hook without calling set-state in useFrame? Or should I not update the dependency at all? Or is there anyway I can access P2.js's native setters of args (e.g. getting access to the Body object of the component)?

And btw thank you for maintaining this amazing project!!

[isaac-mason]

This is unfortunately a limitation of the current API returned by shape hooks - there are no methods for setting shape properties.

@react-three/p2 is largely a fork of @react-three/cannon adapted for p2. There was some discussion about how this might be done in the @react-three/cannon repo (pmndrs/use-cannon#35), but nothing has been done in that space yet.

I'll mark this issue as an enhancement for now.

If there's interest in this, contributions are always welcome 🙂