Cannon.js
3D JavaScript physics engine
Cannon.js is an open source JavaScript 3D physics engine created by Stefan "schteppe" Hedman. Unlike physics engine libraries ported from C++ to JavaScript, cannon.js is written in JavaScript from the start and can take advantage of its features. In a 2013 comparison with Ammo.js, cannon.js was found to be "more compact, more comprehensible, more powerful with regard to its performance and also easier to understand", but did not have as many features.
01Features
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, an application of X3D which allows 3D graphics to be included in web pages without the need for a plug-in.
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
02Example
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; })();Sources and credits
This article is adapted from the Wikipedia article “Cannon.js”, written by its contributors and licensed under CC BY-SA 4.0. Fathomly has changed the layout, removed citation markers, navigation and maintenance notices, and adjusted punctuation. This adapted version is shared under the same license. For references, see the original article.
Fathomly is not affiliated with or endorsed by the Wikimedia Foundation. Spotted a problem? Tell us.