如何使用 cancelAnimationFrame 停止旋转？

Question

我目前正在使用threejs 和requestAnimationFrame 方法。我尝试按住按钮将相机向右旋转。我的问题是，通过释放按钮，每次我再次按下按钮时，旋转都不会停止。

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 );
}

我试图通过发布mainPivot.rotation.y-=Math.PI/180;on 来解决这个问题，这很有效，但这不是最好的解决方案，因为onmouseup 事件很容易被绕过。知道如何解决吗？

Answer 1

您使用不正确。 requestAnimationFrame 返回一个您在调用 cancelAnimationFrame 时使用的 id。

var id = requestAnimationFrame();

...

cancelAnimationFrame( id );