使用three.js和tween.js更改对象的位置

Question

我正在使用JavaScript编写第一步并使用Three.js进行编码。

正如您在此处http://codepen.io/gnazoa/pen/BjoBZz所见，如果您在框中单击，则会更改其z位置。

问题是当补间开始时，再次在框中单击，动画将停止并重新开始。

当补间已经启动时，没有办法避免再次发出click事件？你有什么建议吗？

这是我所做的一部分：

        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 > 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();

          }
        }