Cannon.js

Cannon.js supports the following shapes: sphere, plane, box, cylinder, convex polyhedron, particle, and heightfield. This collection of shapes matches the collection used by rendering engines such as Three.js and Babylon, but is not complete. For example, it is not sufficient for X3DOM, The physics engine implements rigid-body dynamics, discrete collision detection, and a Gauss-Seidel constraint solver. It can perform cloth simulation Cannon.js can be used with Three.js and Babylon.js WebGL renderers to generate physics-based 3D scenes. It can also be used to provide networked-physics synchronization for multiplayer online games using Lance.gg == Example ==

The sample code below creates a sphere on a plane, steps the simulation, and prints the sphere simulation to the console. Note that Cannon.js uses SI units (metre, kilogram, second, etc.). // Setup our world var world = new CANNON.World(); world.gravity.set(0, 0, -9.82); // m/s² // Create a sphere var radius = 1; // m var sphereBody = new CANNON.Body({ mass: 5, // kg position: new CANNON.Vec3(0, 0, 10), // m shape: new CANNON.Sphere(radius) }); world.addBody(sphereBody); // Create a plane var groundBody = new CANNON.Body({ mass: 0 // mass == 0 makes the body static }); var groundShape = new CANNON.Plane(); groundBody.addShape(groundShape); world.addBody(groundBody); var fixedTimeStep = 1.0 / 60.0; // seconds var maxSubSteps = 3; // Start the simulation loop var lastTime; (function simloop(time) { requestAnimationFrame(simloop); if (lastTime !== undefined) { var dt = (time - lastTime) / 1000; world.step(fixedTimeStep, dt, maxSubSteps); } console.log("Sphere z position: " + sphereBody.position.z); lastTime = time; })(); == References ==