在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）第一個例子中的問題是，在每個動畫幀中安裝另一個新的超時。因此，例如，如果您在10,000秒內每秒有60幀，則會設置6億個新超時。

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/]