Sobre
Cannon JS é um motor de física 3D leve e simples para a web.


Características

• Dinâmica de corpo rígido
  
• Detecção de colisão discreta
  
• Contatos, fricção e restituição
  
• Restrições
  
  
  
  • PointToPoint (também conhecido como junta de esfera/soquete)
    
  • Distância
    
  • Dobradiça (com motor opcional)
    
  • Trancar
    
  • ConeTwist
    
  
  
  
• Solucionador de restrições de Gauss-Seidel e algoritmo de divisão de ilha
  
• Filtros de colisão
  
• Corpo dormindo
  
• SPH experimental/suporte de fluido
  
• Várias formas e algoritmos de colisão
  

Instalação no navegador
Basta incluir cannon.js ou cannon.min.js em seu html e pronto:

Código:

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

Instalação via Node.js
Instale o pacote cannon via NPM:

Código:

npm install --save cannon

Como alternativa, aponte para o repositório Github diretamente para obter a versão mais recente:

Código:

npm install --save schteppe/cannon.js

Exemplo
O código de exemplo abaixo cria uma esfera em um plano, executa a simulação e imprime a simulação de esfera no console. Observe que Cannon.js usa unidades SI (metro, quilograma, segundo etc.).

Código:


// Setup our world
var world = new CANNON.World();
world.gravity.set(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;
})();

Se você quiser saber como usar cannon.js com um mecanismo de renderização, por exemplo, Three.js, consulte os Exemplos.

Links úteis
Site oficial
Github