Using three.js and tween.js to change the position of an object
<p>I am making my first steps coding with JavaScript and playing with Three.js too.</p>

<p>As you can see here <a href="http://codepen.io/gnazoa/pen/BjoBZz" rel="nofollow">http://codepen.io/gnazoa/pen/BjoBZz</a> , if you make a click in the box, it will change her z position.</p>

<p>The problem is that when the tween starts, and you make a click in the box again, the animation stops and starts again.</p>

<p>There is not a way to avoid make the click event again when the tween has already started? Do you have a suggestion?</p>

<p>This is a piece of the that I made:</p>

<pre><code>        function onDocumentMouseDown(event) {

          event.preventDefault();

          mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
          mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;

          raycaster.setFromCamera(mouse, camera);

          var intersects = raycaster.intersectObjects(scene.children);

          if (intersects.length &gt; 0) {

            new TWEEN.Tween(intersects[0].object.position).to({
                x: 0,
                y: 0,
                z: 1000
              }, 50000)
              .easing(TWEEN.Easing.Elastic.Out).start();

            new TWEEN.Tween(intersects[0].object.rotation).to({
                x: 0,
                y: 2,
                z: 0
              }, 50000)
              .easing(TWEEN.Easing.Elastic.Out).start();

          }
        } 
</code></pre>