title: How to do collision between two cubes in cannon.js?
body: <p>when i try to make collision between a platform created with cannon.js an another box... the collision depend of the position where i put this box. Sometimes the box go throught de plattform.</p>
  
  <p>However if i make a collision between this platfmorm and a sphere its run pefectly.</p>
  
  <p>My cuestion is,Why is happen this?
  And most important... What can i do to solve its?</p>
  
  <p>please excuse my posibles erros writting... my level of english is not good jeje.
  Here is the code, thanks in advance:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;pruebas&lt;/title&gt;
      &lt;style&gt;canvas { width: 100%; height: 100% }
      body {margin:0px; padding: 0px}
      &lt;/style&gt;
      &lt;script src="JS/ThreeJS/three.js"&gt;&lt;/script&gt;
      &lt;script src="JS/cannon.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  
      //************************************** FISICA
      var world = new CANNON.World();
      world.gravity.set(0,-50,0);
      world.broadphase = new CANNON.NaiveBroadphase();
  
  
  
      //*************************************** RENDERER
      var scene = new THREE.Scene();
      var renderer = new THREE.WebGLRenderer( { antialias: true } );
      document.body.appendChild(renderer.domElement);
      renderer.setClearColor("#000000");
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMapEnabled = true;
      renderer.shadowMapSoft = true;
  
  
  
      //**************************************** LIGHT
      var light = new THREE.SpotLight("white");
      light.position.set(-180,100,-90);
      light.castShadow = true;
      light.shadowDarkness = 1;
      light.intensity = 3;
      scene.add(light);
  
  
  
  
      //****************************************** PLATFORMS
      //plane_fisic
      var groundShape = new CANNON.Plane();
      var groundBody = new CANNON.RigidBody(0,groundShape);
      groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2);
      world.add(groundBody);
      //plane_mesh
      var geometry = new THREE.PlaneGeometry( 300, 300, 50, 50 );
      geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
      var material = new THREE.MeshLambertMaterial( { color: 0xdddddd } );
      var plano = new THREE.Mesh( geometry, material );
      plano.castShadow = true;
      plano.receiveShadow = true;
      scene.add(plano);
  
      //box_fisic
      var forma = new CANNON.Box(new CANNON.Vec3(80,5,50));
      var mass = 0;
      var alma_table = new CANNON.RigidBody(mass,forma);
      alma_table.position.y = 35;
      alma_table.useQuaternion = true;
      world.add(alma_table);
  
      //box_mesh
      var floorMaterial = new THREE.MeshPhongMaterial();
      var tableGeometry = new THREE.CubeGeometry(160,10,100);
      var table = new THREE.Mesh(tableGeometry,floorMaterial);
      table.castShadow = true;
      table.receiveShadow = true;
      table.ambientLightColor = true;
      scene.add(table);
  
  
  
      //************************************** OBJETS
      //BOX
      //fisic
      var forma = new CANNON.Box(new CANNON.Vec3(8,8,8));
      var mass = 2;
      var box_alma = new CANNON.RigidBody(mass,forma);
      box_alma.position.y = 80;
      box_alma.position.x = 0;
      box_alma.position.z = 0;
      box_alma.useQuaternion = true;
      world.add(box_alma);
  
      //mesh
      var floorMaterial = new THREE.MeshPhongMaterial();
      var tableGeometry =new THREE.CubeGeometry(16,16,16);
      var box = new THREE.Mesh(tableGeometry,floorMaterial);
      box.castShadow = true;
      box.receiveShadow = true;
      box.ambientLightColor = true;
      scene.add(box);
  
      //BOX2
      //fisic
      var forma = new CANNON.Box(new CANNON.Vec3(8,8,8));
      var mass = 2;
      var box_alma2 = new CANNON.RigidBody(mass,forma);
      box_alma2.position.y = 80;
      box_alma2.position.x = -40;
      box_alma2.position.z = +20;
      box_alma2.useQuaternion = true;
      world.add(box_alma2);
  
      //mesh
      var floorMaterial = new THREE.MeshPhongMaterial();
      var tableGeometry =new THREE.CubeGeometry(16,16,16);
      var box2 = new THREE.Mesh(tableGeometry,floorMaterial);
      box2.castShadow = true;
      box2.receiveShadow = true;
      box2.ambientLightColor = true;
      scene.add(box2);
  
      //BOX3
      //fisic
      var forma = new CANNON.Box(new CANNON.Vec3(8,8,8));
      var mass = 2;
      var box_alma3 = new CANNON.RigidBody(mass,forma);
      box_alma3.position.y = 80;
      box_alma3.position.x = 50;
      box_alma3.position.z = 0;
      box_alma3.useQuaternion = true;
      world.add(box_alma3);
  
      //mesh
      var floorMaterial = new THREE.MeshPhongMaterial();
      var tableGeometry =new THREE.CubeGeometry(16,16,16);
      var box3 = new THREE.Mesh(tableGeometry,floorMaterial);
      box3.castShadow = true;
      box3.receiveShadow = true;
      box3.ambientLightColor = true;
      scene.add(box3);
  
  
  
      //****************************************************** CÁMARA
      var camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 150000);
      camera.position.z =300;
      camera.position.y=130;
      camera.position.x=0;
      camera.lookAt(scene.position)
  
  
  
      update = function(){
          world.step(1/60);
         alma_table.position.copy(table.position);
         alma_table.quaternion.copy(table.quaternion);
  
         box_alma2.position.copy(box2.position);
         box_alma2.quaternion.copy(box2.quaternion);
  
         box_alma.position.copy(box.position);
         box_alma.quaternion.copy(box.quaternion);
  
          box_alma3.position.copy(box3.position);
          box_alma3.quaternion.copy(box3.quaternion);
      }
  
  
  
  
      var loop = function () {
          requestAnimationFrame(loop);
          renderer.render(scene,camera);
          update();
      }
      loop();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>