staunsholm / cannon.js

A lightweight 3D physics engine written in JavaScript.

cannon.js

Lightweight 3D physics for the web

Inspired by three.js and ammo.js, and driven by the fact that the web lacks a physics engine, here comes cannon.js.

Demos - Documentation - Rendering hints - NPM package

Usage

Download the library and include it in your html. Alternatively, build the library yourself (see Makefile).

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

The code below creates a sphere on a plane, steps the simulation, and prints the sphere simulation to the console.

// Setup our world
var world = new CANNON.World();
world.gravity.set(0,0,-9.82);
world.broadphase = new CANNON.NaiveBroadphase();
    
// Create a sphere
var mass = 5, radius = 1;
var sphereShape = new CANNON.Sphere(radius);
var sphereBody = new CANNON.RigidBody(mass,sphereShape);
sphereBody.position.set(0,0,10);
world.add(sphereBody);
    
// Create a plane
var normal = new CANNON.Vec3(0,0,1);
var groundShape = new CANNON.Plane(normal);
var groundBody = new CANNON.RigidBody(0,groundShape);
world.add(groundBody);
    
// Step the simulation
setInterval(function(){
  world.step(1.0/60.0);
  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.

Change log

0.4.3

• World now dispatches "preStep" and "postStep" events.
• Introduced Body and Particle. New inheritance: Body -> Particle -> RigidBody.
• Added Quaternion.toAxisAngle()
• Added Ray. Basic hit testing for ConvexPolyhedra.
• RigidBody now dispatches the following events: "collide", "sleep", "sleepy", "wakeup"
• Added Solver.setSpookParams(k,d) and removed SPOOK param things from World.
• Sleep functionality for RigidBody

0.4.2 2012-08-06

• Code seem stable enough to start a change log.

Todo

Ideas and todo's for developers. The todo's are marked with @todo in the code.

• Collision/contacts between convexhulls and sphere
• Contact reduction
• Improved collision detection - spatial hashing, octrees or similar (Continous?)
• Figure out good Solver base class API - make current Solver to a subclass
• Better class structure for Constraints, Jacobian entries etc
• ParallelSolver that uses Web Workers - splits system into independent parts and solves them in parallel - see http://www.html5rocks.com/en/tutorials/workers/basics/
• Caching of bounding sphere radius
• Shapes (based on ConvexHull is enough to begin with): Cone, cylinder
• First-contact impulse forces