title: Cancel Animation in Three.js
body: <p>I'd like to stop a Three.js animation properly in order to execute a function afterwards.</p>
  
  <p>This is the code I have :</p>
  
  <pre><code>var anim;
  
  function animate() {
      anim = requestAnimationFrame(animate);
  
      checkRotation();
  
      renderer.render(scene, camera);
  
      setTimeout(cancel, 10000);
  }
  
  function cancel() {
      cancelAnimationFrame(anim);
      finalCoords();
  }
  
  animate();
  </code></pre>
  
  <p>Being put like this, the animation <code>checkRotation()</code> indeed stops but the function <code>finalCoords()</code> keeps looping as if it was trapped in some kind of recursion.</p>
  
  <p>I have also tried this :</p>
  
  <pre><code>var anim;
  
  function animate(anima) {
      anima = requestAnimationFrame(animate);
  
      checkRotation();
  
      renderer.render(scene, camera);
  }
  
  function cancel(anima) {
      cancelAnimationFrame(anima);
      finalCoords();
  }
  
  animate(anim);
  
  setTimeout(cancel(anim), 10000);
  </code></pre>
  
  <p>Now the loop stops but the function <code>finalCoords()</code> doesn't return proper results and the animation doesn't stop.</p>
  
  <p>What did I do wrong ? and how can I fix it ?</p>
  
  <p>Thanks!</p>