javascript - 如何用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;来解决这个问题，这有效，但这不是最好的解决方案，因为onmouseup code> 事件很容易被绕过。知道如何出行吗？

Answer 1

您的使用方式不正确。 requestAnimationFrame 返回一个 id，您在调用 cancelAnimationFrame 时使用该 ID。

var id = requestAnimationFrame();

...

cancelAnimationFrame( id );