CODEWITHSUNDEEP
javascriptanimationthree.jsrequestanimationframe
PLAYCUBE
PLAYCUBE

Reputation: 875

How to stop the rotation with cancelAnimationFrame?

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?

Upvotes: 0

Views: 190

Answers (1)

gaitat
gaitat

Reputation: 12632

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

var id = requestAnimationFrame();

...

cancelAnimationFrame( id );

Upvotes: 2

Related Questions