javascript - 如何使用cancelAnimationFrame停止旋转？

我目前正在使用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;来解决此问题，该方法可行，但它不是最佳解决方案，因为可以轻松地绕过onmouseup事件。任何想法如何解决？

最佳答案

您使用不正确。 requestAnimationFrame返回您在调用cancelAnimationFrame时使用的ID。

var id = requestAnimationFrame();

...

cancelAnimationFrame( id );