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 
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:
0.0 on each iteration.Thanks!!! 2nd way seems more interesting 
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
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.
