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）最初の例の問題は、各アニメーションフレームに別の新しいタイムアウトをインストールすることです。したがって、たとえば、1秒間に60フレーム/秒が10,000秒の場合、6億回の新しいタイムアウトが設定されます。

2）問題は、タイムアウト機能では送信されませんが、一度呼び出されると2番目の例になります。さらに、アニメーションのフレームの識別子を格納する変数の名前と混同しています。

3）実施例2の改良版：

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