停止tween.js和three.js中的青少年动画

Question

我在three.js中使用tween.js阻止一个tween时遇到问题。文档声明使用tween.stop()，但这似乎不起作用。

此处的示例：http://jsfiddle.net/feLzjzy9/1/

当您将鼠标悬停在方框上时，它开始改变颜色。这个动画需要10秒，但我试图停止它，只是为了使用setTimeout(function(){ tween.stop() }, 1000);测试.stop（）功能，但它没有任何作用。。。

非常感谢您的帮助！

Answer 1

存在引用问题和更新问题。我对你的代码做了一些更改。这不是一个解决方案，您可以单独使用每个更改。最好的解决方案是将每个tween作为函数内的var，在tweined对象中集成计数，并使用onUpdate（function（）｛if（this.counter>1000）｛tween.stop｝｝）（INTERSECTED.material.color），因为您创建了大量无差定时器和tween，这将是一个性能问题。

function animate() { 
      //
      TWEEN.update();
      //
}
    if (intersects.length > 0) {
        if (INTERSECTED != intersects[0].object) {
            if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
            INTERSECTED = intersects[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            //INTERSECTED.material.emissive.setHex(0xff0000);
            TWEEN.remove(tween);
            tween = new TWEEN.Tween(INTERSECTED.material.color).onStart(function(){
      setTimeout(function(){ tween.stop() }, 1000); ///not good
}).start();     
            .to({r: 0, g: 25, b: 155}, 10000) /// here set correct time
            .easing(TWEEN.Easing.Quartic.In)
            .start();
            setTimeout(function(){ tween.stop() }, 1000);/// will not work if you create anoter it that one second
        }
        else {
            if(tween) tween.update(time); // bad
        }
    }