如何使用 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 事件很容易被绕过。知道如何出行吗？

Answer 1

您使用不当。 requestAnimationFrame returns 调用 cancelAnimationFrame 时使用的 ID。

var id = requestAnimationFrame();

...

cancelAnimationFrame( id );

如何使用 cancelAnimationFrame 停止旋转？

How to stop the rotation with cancelAnimationFrame?

javascript

animation

three.js

requestanimationframe