Stop a tween animation in tween.js and three.js

Question

I'm having trouble stopping a tween in three.js, using tween.js. The docs state to use tween.stop(), but that doesn't seem to work.

Example here: http://jsfiddle.net/feLzjzy9/1/

As you hover with the mouse over a box, it starts to change color. This animation takes 10 seconds, but I try to stop it just to test the .stop() feature using setTimeout(function(){ tween.stop() }, 1000);but it doesn't do a thing...

Any help is much appreciated!

did you start your tween? i don't see tween update function in animate(). You also can call TWEEN.getAll() in console to check if is your tween works properly. — Martin
In my project there's a tween.update(time) in the animate() function. In the jsfiddle it's apparently on line 144. I tried using console.log(TWEEN.getAll()). After I call tween.stop(), my console outputs [ ] , so I guess the tween is stopped, but the animation (=changing color) keeps going. — binoculars
It is possible that animation is result of another action than a tween? — Martin
Try to use more specific reference for a tween. stopping the tween will keep tween at the reference, another action did start the same tween again. after stopping use TWEEN.remove(tween); — Martin
(comment to your first 2nd reponse): Don't think so... I included tween.js for this animation only. Also, in the jsfiddle (i.e. a completely different project), .stop() doesn't seem to work either on color-change animations. — binoculars

Martin Martin · Accepted Answer · 2016-05-16T15:35:44

There is Reference problem and update problem. I made some changes in you code. It is not a solution, you can use each change individually. Best solution is to make each tween as var inside a function, integrate counting in tweened objects and use onUpdate(function(){if(this.counter > 1000){tween.stop}}) (INTERSECTED.material.color) because you creating a lot of unrefferenced timers and tweens, which will be a performance problem.

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
        }

    }

Stop a tween animation in tween.js and three.js

1 Answers