0

I have a rather simple react-three-fiber setup that includes cannon.js-powered physics. In the scene there is a cup -- which is modelled as a cylinder whose top radius is bigger than the bottom one -- that is placed on a surface.

When I run the code, during the loading screen everything looks fine. But when physics kick in, the cup suddenly "sinks" into the ground. Why is that? I can't make sense of that...

One theory of mine was that the "physics shape" of the cylinder is not identical with the "optical shape" that gets rendered, but even then the movement I observe still doesn't make sense with any reasonable bounding box I can imagine...

Working example: https://codesandbox.io/s/amazing-proskuriakova-4slpq

Christallkeks
  • 525
  • 5
  • 18

2 Answers2

0

Physics are finicky and really hard to debug because you're often trying to intuit the effects of an invisible system by its effects on whatever hybrid view you have.

I notice if i bring the mass downn to a more reasonable value, like 5, the object appears to roll around like a sphere or some other shape.. so I think your theory is sound. I don't know off the top of my head what the solution is, but I do know that the only physics engine I "trust" in the js space, except for very simple simulations, is Ammo.js. It's hard to use, but is an emscripten port of a truly amazing AAA quality library. https://threejs.org/examples/?q=phys#physics_ammo_break

I would start by getting a cube and a sphere working.. once you have verified that those work as expected.. ideally using real-ish world scale units, like a 1x1x1 cube, with a mass of 1. Use a texture on the sphere so you know that its rolling like you expect. Once you have verified the simpler primitives work, move onto the more complex geometries.

manthrax
  • 4,918
  • 1
  • 17
  • 16
  • After staring at it for a few minutes, it looks like your visual proxy might just need to be rotated by 90 degrees.. but that's just a guess. – manthrax Mar 26 '20 at 06:08
  • Thanks for your answer and the hint with the even weirder behaviour when using a different mass. I brought the issue to the attention of the `use-cannon` devs and they too [assume](https://spectrum.chat/use-cannon/general/bug-with-a-cup-on-a-table~4575ca94-1d56-4298-89af-ca5173ba5a62) some kind of "axis chaos" to be the cause. I already came across `Ammo.js` while researching libaries for this project, but the reason for choosing `react-three-fiber` was that I wanted to save myself from having to deal with a physics engine from scratch, so it's unlikely I'll now start doing _just that_... – Christallkeks Apr 02 '20 at 19:22
0

Best way forward would be to make an issue on the use-cannon GH. That lib and cannon-es are under active maintenance now. Meanwhile, i believe convexpolyhydron can also do it flawlessly, see: https://codesandbox.io/s/r3f-convex-polyhedron-cnm0s

hpalu
  • 1,357
  • 7
  • 12
  • Thanks for suggesting a next step - I asked the developers [on their Spectrum chat](https://spectrum.chat/use-cannon/general/bug-with-a-cup-on-a-table~4575ca94-1d56-4298-89af-ca5173ba5a62) and then indeed opened an [issue (#58)](https://github.com/react-spring/use-cannon/issues/58). While I highly appreciate that you even suggest an alternative, for a beginner like me (who never did anything with Three or Cannon before), "convexpolyhydron" sounds difficult, and not only because it's a linguistic monstrosity... But I'll have a look at your example. – Christallkeks Apr 02 '20 at 19:08