取消Three.js中的动画

我想正确地停止一个Three.js动画，以便在之后执行一个函数

这是我的代码：

var anim;

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

    checkRotation();

    renderer.render(scene, camera);

    setTimeout(cancel, 10000);
}

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

animate();

像这样放置，动画

checkRotation（）

确实停止了，但是函数

finalCords（）

保持循环，就好像它被某种递归捕获一样

我也试过：

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（）

不会返回正确的结果，动画也不会停止

我做错了什么？我怎样才能修好它

谢谢

1）第一个示例中的问题是在每个动画帧中安装另一个新超时。因此，例如，如果每秒60帧，持续10000秒，则将设置6亿个新超时

2） 问题是第二个例子，您只是没有在超时函数中传输，而是一旦调用它。此外，您还对用于存储动画帧标识符的变量的名称感到困惑

3） 第二个示例的改进版本：

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

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

[]

1）第一个示例中的问题是，在每个动画帧中，您都安装了另一个新超时。因此，例如，如果每秒60帧，持续10000秒，则将设置6亿个新超时

2） 问题是第二个例子，您只是没有在超时函数中传输，而是一旦调用它。此外，您还对用于存储动画帧标识符的变量的名称感到困惑

3） 第二个示例的改进版本：

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

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

[]