title: Three.js and Tween.js chain of animations not cycling
body: <p>I am attempting to translate a Three.js cube using the Tween.js library.</p>
  
  <p>By creating two <strong>tween</strong> objects I can move the cube back and forth:</p>
  
  <pre><code>var start_position = { x : 0.0 , y: 0.0 };
  var target = { x : 3.0, y: 0.0 };
  
  var tween_to = new TWEEN.Tween(start_position)
              .to(target, 2000);
  
  
  
  var start_position2 = { x : 3.0 , y: 0.0 };
  var target2 = { x : 0.0, y: 0.0 };
  
  var tween_fro = new TWEEN.Tween(start_position2)
              .to(target2, 1000);
  
  
  
  tween_to.onUpdate(onUpdate);
  tween_fro.onUpdate(onUpdate);
  
  function onUpdate()
  {
    cube.position.x = this.x;
    cube.position.y = this.y;
  };
  
  tween_to.chain(tween_fro);
  
  tween_to.start();
  </code></pre>
  
  <p>Then in my animation loop I have:</p>
  
  <pre><code>TWEEN.update();
  </code></pre>
  
  <p>This works <strong>fine</strong>.  However if I complete the cycle by referencing the first tween from the second for example:</p>
  
  <pre><code>tween_to.chain(tween_fro);
  tween_fro.chain(tween_to);
  </code></pre>
  
  <p>The animation jumps between extremes without any interpolation, it just appears at each position (after the first cycle is complete).</p>
  
  <p>I assume I am misusing the library somehow, but following guides online I don't see how this method differs from the official Tween.js examples.</p>