.. | |||
build | 10 months ago | ||
demos | 10 months ago | ||
docs | 10 months ago | ||
examples | 10 months ago | ||
images | 10 months ago | ||
libs | 10 months ago | ||
src | 10 months ago | ||
test | 10 months ago | ||
tools/ threejs | 10 months ago | ||
util | 10 months ago | ||
.jshintignore | 10 months ago | ||
.jshintrc | 10 months ago | ||
.npmignore | 10 months ago | ||
Gruntfile.js | 10 months ago | ||
LICENSE | 10 months ago | ||
README.markdown | 10 months ago | ||
index.html | 10 months ago | ||
package.json | 10 months ago | ||
yuidoc.json | 10 months ago |
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 - CDN
Just include cannon.js or cannon.min.js in your html and you're done:
<script src="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 uses SI units (metre, kilogram, second, etc.).
// Setup our world var world = new CANNON.World({ gravity: new CANNON.Vec3(0, 0, -9.82) // m/s² }); // Create a sphere var radius = 1; // m var sphereBody = new CANNON.Body({ mass: 5, // kg position: new CANNON.Vec3(0, 0, 10), // m shape: new CANNON.Sphere(radius) }); world.addBody(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.addBody(groundBody); var fixedTimeStep = 1.0 / 60.0; // seconds var maxSubSteps = 3; // Start the simulation loop var lastTime; (function simloop(time){ requestAnimationFrame(simloop); if(lastTime !== undefined){ var dt = (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 the Examples.
Sphere | Plane | Box | Convex | Particle | Heightfield | Trimesh | |
---|---|---|---|---|---|---|---|
Sphere | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
Plane | - | - | Yes | Yes | Yes | - | Yes |
Box | - | - | Yes | Yes | Yes | Yes | (todo) |
Cylinder | - | - | Yes | Yes | Yes | Yes | (todo) |
Convex | - | - | - | Yes | Yes | Yes | (todo) |
Particle | - | - | - | - | - | (todo) | (todo) |
Heightfield | - | - | - | - | - | - | (todo) |
Trimesh | - | - | - | - | - | - | - |
The simpler todos are marked with @todo
in the code. Github Issues can and should also be used for todos.
Create an issue if you need help.