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

Hi, I’m currently trying to clone 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.

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


like this

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.


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:


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