Cannon.js
~34 kB min+gzAdd realistic 3D physics — gravity, collisions, and constraints — to your web projects.
See It in Action
Real 3D physics in the browser — objects that fall, collide, and swing like the real world.
Spheres with different sizes fall onto a ground plane and bounce off each other — basic rigid body physics.
What is Cannon.js?
Cannon.js is a JavaScript library that adds 3D physics to your web pages. It simulates gravity, collisions, and forces so objects in your 3D scenes behave like they would in the real world — they fall, bounce, stack, and tumble.
The original cannon.js by Stefan Hedman is no longer maintained. The recommended fork is cannon-es (by pmndrs), which adds TypeScript support and ES module imports. The latest version is 0.20.0, published in 2022.
When to Use Cannon.js
How Cannon.js Compares
Cannon.js is for 3D physics. Matter.js is for 2D physics. Pick based on whether your project is 2D or 3D.
Ammo.js is a port of the Bullet physics engine — more features (soft bodies, vehicles) but much larger and harder to learn. Both are legacy compared to Rapier. Cannon-es is the lighter, easier option.
Rapier is the modern choice — WASM-based, significantly faster with SIMD support, and actively maintained (v0.30.0 in 2025). For new projects, Rapier is usually the better pick. Cannon-es has more tutorials and a gentler learning curve.
Get Started with Cannon.js
npm install cannon-esyarn add cannon-es<script src="https://cdn.jsdelivr.net/gh/KLA6/[email protected]/cannon-es.umd.js"></script>import * as CANNON from "cannon-es";
// Create a physics world with gravity
const world = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.82, 0)
});
// Add a sphere that will fall
const sphere = new CANNON.Body({
mass: 5,
shape: new CANNON.Sphere(1),
position: new CANNON.Vec3(0, 10, 0)
});
world.addBody(sphere);
// Add a static ground plane
const ground = new CANNON.Body({
mass: 0, // mass 0 = static, won't move
shape: new CANNON.Plane()
});
ground.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
world.addBody(ground);
// Run the simulation
function animate() {
requestAnimationFrame(animate);
world.fixedStep(); // advance physics by 1/60s
console.log(sphere.position.y); // watch it fall!
}
animate();