Can I use 2d physics engine and 3d physics engine together?

Hi, I’m currently trying to clone https://www.superhi.com/ this website’s footer animation.

It seems that the ball translates only in x,y coordinates but rotates in 3d.

To implement, I’m thinking of using p2-es for translation and cannon.js for rotation, but does this works? and is it okay?

P.S if anyone have better idea, pls let me know :slight_smile:

May it work? Possibly, but only by coincidence. Using 2 physics engines at the same time would require a chain like:

Add bodies to engine 1 ->
 Add bodies to engine 2 ->
  Resolve bodies in engine 1 ->
   Update bodies in engine 2 according to engine 1 solution ->
    Resolve bodies in engine 2 ->
     Apply solutions from engine 2 to three.js scene

Which may still not work if the engines resolve physics / collisions in different ways or different precision.

Use just cannon, then either:

  1. Simply copy only x/y coordinates from the cannon body to three.js body, ignoring z - and set .z for cannon body back to 0.0 on each iteration.
  2. A bit more fun way, just place two infinite planes in cannon simulation that’ll contain the spheres in a way they wouldn’t significantly move on the Z axis. Then again, copy only x/y coordinates from the cannon body to the three.js mesh - without the need of resetting the z-axis in cannon.
2 Likes

Thanks!!! 2nd way seems more interesting :grinning: your the hero of my day

in rapier you can enable/disable axis position and rotation individually. you can have objects spinning all directions but moving only x and y for instance. here’s one such example https://codesandbox.io/p/sandbox/text-spheres-zht4pz?file=%2Fsrc%2FApp.jsx

2 Likes

like this https://codesandbox.io/p/sandbox/optimistic-vaughan-8skrmk?workspaceId=7fd07faf-cf1d-470f-bfb7-32ec2f50b644

ps, comment <Environment>...</Environment> and material-roughness={0.2} if you want it to look flat, uncomment enabledRotations={[false, false, true]} if you want to lock 2d rotations

pps if it should come up, rapier is a vanilla physics library. i use three through react because it’s easier. you would have to write a lot of code to get the same output but generally rapier supports what you need.

2 Likes

This is may not be helpful in your case but we use a 2D physics engine on a Canvas Texture that is made interactive with ZIM TextureActive. Here is an example:

Z_8XNXQ

And then the mesh can be added to a 3D physics engine.