Cannon.js is an

open source Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use the source code, design documents, or content of the product. The open-source model is a decentralized sof ...

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

physics engine A physics engine is computer software that provides an approximate simulation of certain physical systems, such as rigid body dynamics (including collision detection), soft body dynamics, and fluid dynamics, of use in the domains of computer ...

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.

Features

Cannon.js supports the following shapes: sphere, plane, box, cylinder,

convex polyhedron A convex polytope is a special case of a polytope, having the additional property that it is also a convex set contained in the n-dimensional Euclidean space \mathbb^n. Most texts. use the term "polytope" for a bounded convex polytope, and the w ...

, 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 X3D is a royalty-free ISO/IEC standard for declaratively representing 3D computer graphics. File format support includes XML, ClassicVRML, Compressed Binary Encoding (CBE) and a draft JSON encoding. X3D became the successor to the Virtual Re ...

which allows 3D graphics to be included in web pages without the need for a

plug-in Plug-in, plug in or plugin may refer to: * Plug-in (computing) is a software component that adds a specific feature to an existing computer program. ** Audio plug-in, adds audio signal processing features ** Photoshop plugin, a piece of softwar ...

. The physics engine implements rigid-body dynamics, discrete

collision detection Collision detection is the computational problem of detecting the intersection (Euclidean geometry), intersection of two or more objects. Collision detection is a classic issue of computational geometry and has applications in various computing ...

, 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 game A multiplayer video game is a video game in which more than one person can play in the same game environment at the same time, either locally on the same computing system ( couch co-op), on different computing systems via a local area network, or ...

s 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 The International System of Units, known by the international abbreviation SI in all languages and sometimes pleonastically as the SI system, is the modern form of the metric system and the world's most widely used system of measurement. E ...

(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(); world.addBody(sphereBody); // Create a plane var groundBody = new CANNON.Body(); 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) )();

References

External links

*
Source Code Repository
{{Physics engines Computer physics engines Software using the MIT license