如何使用cancelAnimationFrame停止旋转？

Question

I am working currently with threejs and the requestAnimationFrame method. I try to rotate a camera to the right by holding a button. My problem here is, that by releasing the button, the rotation doesn't stop end gets accelerated everytime I press the button again.

HTML:

<button id="right" onmousedown="rotateRight()" onmouseup="rotatestopRight()">Right</button> 

JavaScript:

function rotateRight(){
    mainPivot.add(camera);
    mainPivot.rotation.y+=Math.PI/180;
    requestAnimationFrame( rotateRight );
}

function rotatestopRight(){
    cancelAnimationFrame( rotateRight );
}

I tried to solve this by making mainPivot.rotation.y-=Math.PI/180; on release, which worked, but it's not the best solution, since onmouseup event can easily be bypassed. Any idea how to get around?

Answer 1

You are using it incorrectly. requestAnimationFrame returns an id which you use when you call cancelAnimationFrame .

var id = requestAnimationFrame();

...

cancelAnimationFrame( id );