Cannon.js
   HOME

TheInfoList



OR:

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 and view the source code, design documents, or content of the product. The open source model is a decentrali ...
JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...
3D
physics engine A physics engine is computer software that provides an approximate simulation of certain physical systems, typically classical dynamics, including rigid body dynamics (including collision detection), soft body dynamics, and fluid dynamics. I ...
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 In geometry, a polyhedron (: polyhedra or polyhedrons; ) is a three-dimensional figure with flat polygonal faces, straight edges and sharp corners or vertices. The term "polyhedron" may refer either to a solid figure or to its boundary su ...
, particle, and
heightfield In computer graphics, a heightmap or heightfield is a raster image used mainly as Discrete Global Grid in secondary elevation modeling. Each pixel stores values, such as surface elevation data, for display in 3D computer graphics. A heightm ...
. This collection of shapes matches the collection used by rendering engines such as Three.js and
Babylon Babylon ( ) was an ancient city located on the lower Euphrates river in southern Mesopotamia, within modern-day Hillah, Iraq, about south of modern-day Baghdad. Babylon functioned as the main cultural and political centre of the Akkadian-s ...
, 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 Collision detection is the computational problem of detecting an intersection of two or more objects in virtual space. More precisely, it deals with the questions of ''if'', ''when'' and ''where'' two or more objects intersect. Collision detect ...
, 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, internationally known by the abbreviation SI (from French ), is the modern form of the metric system and the world's most widely used system of measurement. It is the only system of measurement with official st ...
(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