Остановить анимацию движения в tween.js и three.js

Question

У меня проблемы с остановкой подростка в three.js, используя tween.js. Документы государства для использования tween.stop(), но это не похоже на работу.

Пример здесь: http://jsfiddle.net/feLzjzy9/1/

Когда вы наводите курсор мыши на поле, оно начинает менять цвет. Эта анимация занимает 10 секунд, но я пытаюсь остановить ее, просто чтобы протестировать функцию.stop(), используя setTimeout(function(){ tween.stop() }, 1000);но это ничего не делает...

Любая помощь высоко ценится!

Answer 1

Существует проблема ссылки и проблема обновления. Я сделал некоторые изменения в вашем коде. Это не решение, вы можете использовать каждое изменение индивидуально. Лучшее решение - сделать каждую анимацию как переменную внутри функции, интегрировать подсчет в анимированных объектах и ​​использовать onUpdate(function(){if(this.counter > 1000){tween.stop}}) (INTERSECTED.material.color), потому что вы создание большого количества таймеров и твинов, на которые нет ссылок, что станет проблемой производительности.

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
        }

    }