cannon

A lightweight 3D physics engine written in JavaScript.

cannon.js

Inspired by three.js and ammo.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

Optionally, start by building the library using Grunt.

Include build/cannon.js in your html:

<script src="cannon.js"></script>

Then you can start experimenting.

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² 
world.broadphase = new CANNON.NaiveBroadphase();
 
// Create a sphere 
var radius = 1; // m 
var sphereBody = new CANNON.Body({
   mass: 5 // kg 
});
var sphereShape = new CANNON.Sphere(radius);
sphereBody.addShape(sphereShape);
sphereBody.position.set(0,0,10); // m 
world.add(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.add(groundBody);
 
// Step the simulation 
setInterval(function(){
  var timeStep = 1.0/60.0; // seconds 
  world.step(timeStep);
  console.log("Sphere z position: " + sphereBody.position.z);
}, 1000.0/60.0);

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

  • Rigid body physics
  • Collision detection (no CCD)
  • Contacts with friction and restitution
  • Constraints
    • PointToPoint (also called balljoint)
    • Distance
    • Hinge (with optional motor)
  • Gauss-Seidel constraint solver and an island split algorithm
  • Collision filters
  • Body motion states (dynamic, kinematic, static)
  • Body sleeping
  • Experimental SPH / fluid support
  • Various shapes and collisions (see table below)
SpherePlaneBoxConvexParticleHeightfield
SphereYesYesYesYesYesYes
Plane--YesYesYes-
Box--YesYesYesYes
Cylinder--YesYesYesYes
Convex---YesYesYes
Particle-----(todo)
Heightfield------

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

Create an issue on here if you need help.