title: Cannon.js - How to prevent objects clipping 'floor' on update
body: <p>I'm using Cannon.js with Three.js. </p>
  
  <p>I've created a scene which consists of 1 heightfield and 5 balls. I want the balls to roll around the heightfield, using the cannon.js physics.</p>
  
  <p>On mouse move, I rotate the heightfield along the y-axis to make the spheres roll back and forth. </p>
  
  <p>I have an update loop, which copies the sphere position &amp; quaternion from cannon.js and applies to the visual sphere of three.js.
  The heightfield is also updated at the same time as the three.js visual floor. Both of these run in a for loop, in requestAnimationFrame.</p>
  
  <pre><code>updateMeshPositions() {
  
      for (var i = 0; i !== this.meshes.length; i++) {
          this.meshes[i].position.copy(this.bodies[i].position);
          this.meshes[i].quaternion.copy(this.bodies[i].quaternion);
  
          this.hfBody.position.copy(this.mesh.position);
          this.hfBody.quaternion.copy(this.mesh.quaternion);
      }
  }
  </code></pre>
  
  <p>However, the problem is that when the 'floor' is rotating back and forth, the spheres are getting stuck and sometimes even falling through the floor. Here is an example on codepen - <a href="https://codepen.io/danlong/pen/qJwMBo" rel="nofollow noreferrer">https://codepen.io/danlong/pen/qJwMBo</a></p>
  
  <p>Move the mouse up and down on the screen to see this in action.</p>
  
  <p>Is there a better or different way I should be rotating the 'floor' whilst keeping the sphere's moving?</p>