Отмена анимации в Three.js

Question

Я хотел бы остановить анимацию Three.js правильно, чтобы потом выполнить функцию.

Это код, у меня есть:

var anim; 

function animate() { 
    anim = requestAnimationFrame(animate); 

    checkRotation(); 

    renderer.render(scene, camera); 

    setTimeout(cancel, 10000); 
} 

function cancel() { 
    cancelAnimationFrame(anim); 
    finalCoords(); 
} 

animate(); 

Будучи ставить так, анимация checkRotation() действительно останавливается, но функция finalCoords() продолжает цикл, как если бы он был пойман в ловушку в какой-то рекурсии.

Я также попытался это:

var anim; 

function animate(anima) { 
    anima = requestAnimationFrame(animate); 

    checkRotation(); 

    renderer.render(scene, camera); 
} 

function cancel(anima) { 
    cancelAnimationFrame(anima); 
    finalCoords(); 
} 

animate(anim); 

setTimeout(cancel(anim), 10000); 

теперь останавливается петли, но функция finalCoords() не возвращает результаты, а анимация не останавливается.

Что я сделал не так? и как я могу это исправить?

Спасибо!

Answer 1

1) Проблема в первом примере заключается в том, что в каждом кадре анимации устанавливается другой новый тайм-аут. Соответственно, например, если у вас есть 60 кадров в секунду за 10 000 секунд, вы установите 600 миллионов новых тайм-аутов.

2) Проблема - второй пример, который вы просто не передаете в функции тайм-аута, но после его вызова. Кроме того, вы путаетесь с именами переменных, в которых хранится идентификатор кадра анимации.

3) Усовершенствованный вариант второго примера:

var stopAnimate = false; 
function animate(time) { 
    if (!stopAnimate) { 
     checkRotation(time); 
     requestAnimationFrame(animate); 
    } else { 
     finalCoords('final'); 
    } 
} 

animate(); 
setTimeout(function() { 
    stopAnimate = true; 
}, 1000); 

[https://jsfiddle.net/02d37pxs/]