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 초 동안 사용하면 6 억 회의 새로운 시간 초과가 설정됩니다.

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