2d physics in 3d space


This is a simple example of using three JS as a 3d renderer and p2.js as 2d physics engine, to create a powerful 2.5D effect. A 2d physics engine is way faster and easier to handle then any 3d physics engine, perfect for HTML5 applications on desktop or mobile devices.

The script below is very simple and straight forward, it dosen’t include the Debug view you see in the top left to keep things as simple as possible. The script creates a 3d world and a 2d physics world, every object in the 3d world is connected with an object in the 2d physics world. The 2d physics world is simulated and the 3d world just follows this simulation. Each time the 2d physics world gets updated all the connected 3d bodies get an update as well.

apply Physics

(Push to add new boxes, use mouse to zoom and pan around)

 

conclusion

This is a just basic example, everything the 2d physics engine supports can be simulated in the 3d space. And everything in the 3d space can have textures, animations, proper lighting etc.. It’s really simple to create the 3d scene and apply 2d physics to objects.
This kind of 2.5d might not fit into every concept, but it’s looking awesome if executed the right way.