Repository files navigation

Inspired bythree.js andammo.js, and driven by the fact that the web lacks a physics engine, here comes cannon.js.The rigid body physics engine includes simple collision detection, various body shapes, contacts, friction and constraints.

Demos -Documentation -Rendering hints -NPM package -CDN

Just includecannon.js orcannon.min.js in your html and you're done:

<scriptsrc="cannon.min.js"></script>

Install the cannon package via NPM:

npm install --save cannon

Alternatively, point to the Github repo directly to get the very latest version:

npm install --save schteppe/cannon.js

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 usesSI units (metre, kilogram, second, etc.).

// Setup our worldvarworld=newCANNON.World();world.gravity.set(0,0,-9.82);// m/s²// Create a spherevarradius=1;// mvarsphereBody=newCANNON.Body({mass:5,// kgposition:newCANNON.Vec3(0,0,10),// mshape:newCANNON.Sphere(radius)});world.addBody(sphereBody);// Create a planevargroundBody=newCANNON.Body({mass:0// mass == 0 makes the body static});vargroundShape=newCANNON.Plane();groundBody.addShape(groundShape);world.addBody(groundBody);varfixedTimeStep=1.0/60.0;// secondsvarmaxSubSteps=3;// Start the simulation loopvarlastTime;(functionsimloop(time){requestAnimationFrame(simloop);if(lastTime!==undefined){vardt=(time-lastTime)/1000;world.step(fixedTimeStep,dt,maxSubSteps);}console.log("Sphere z position: "+sphereBody.position.z);lastTime=time;})();

If you want to know how to use cannon.js with a rendering engine, for example Three.js, see theExamples.

• Rigid body dynamics
• Discrete collision detection
• Contacts, friction and restitution
• Constraints
  • PointToPoint (a.k.a. ball/socket joint)
  • Distance
  • Hinge (with optional motor)
  • Lock
  • ConeTwist
• Gauss-Seidel constraint solver and an island split algorithm
• Collision filters
• Body sleeping
• Experimental SPH / fluid support
• Various shapes and collision algorithms (see table below)

The simpler todos are marked with@todo in the code. Github Issues can and should also be used for todos.

Create anissue if you need help.