如何停止 requestAnimationFrame 递归/循环? [英] How to stop a requestAnimationFrame recursion/loop?
问题描述
我正在使用 Three.js 和 WebGL 渲染器来制作一个在点击 play
链接时全屏显示的游戏.对于动画,我使用 requestAnimationFrame
.
I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play
link is clicked. For animation, I use requestAnimationFrame
.
我是这样发起的:
self.animate = function()
{
self.camera.lookAt(self.scene.position);
self.renderer.render(self.scene, self.camera);
if (self.willAnimate)
window.requestAnimationFrame(self.animate, self.renderer.domElement);
}
self.startAnimating = function()
{
self.willAnimate = true;
self.animate();
}
self.stopAnimating = function()
{
self.willAnimate = false;
}
当我需要时,我会调用 startAnimating
方法,是的,它确实按预期工作.但是,当我调用 stopAnimating
函数时,事情就坏了!但是没有报告错误...
When I want to, I call the startAnimating
method, and yes, it does work as intended. But, when I call the stopAnimating
function, things break! There are no reported errors, though...
设置基本上是这样的:
- 页面上有一个
play
链接 - 一旦用户点击链接,渲染器的
domElement
应该全屏显示,它确实如此 startAnimating
方法被调用,渲染器开始渲染东西- 点击转义后,我注册一个
fullscreenchange
事件并执行stopAnimating
方法 - 页面尝试退出全屏,确实如此,但整个文档完全空白
- There is a
play
link on the page - Once the user clicks the link, a renderer's
domElement
should fullscreen, and it does - The
startAnimating
method is called and the renderer starts rendering stuff - Once escape is clicked, I register an
fullscreenchange
event and execute thestopAnimating
method - The page tries to exit fullscreen, it does, but the entire document is completely blank
我很确定我的其他代码没问题,而且我不知何故以错误的方式停止了 requestAnimationFrame
.我的解释可能很糟糕,所以我将代码上传到我的网站,你可以在这里看到它发生的情况:http://banehq.com/Placeholdername/main.html.
I'm pretty sure my other code is OK, and that I'm somehow stopping requestAnimationFrame
in a wrong way. My explanation probably sucked, so I uploaded the code to my website, you can see it happening here: http://banehq.com/Placeholdername/main.html.
这是我不尝试调用动画方法和全屏输入和输出工作的版本:http://banehq.com/Correct/Placeholdername/main.html.
Here is the version where I don't try to call the animation methods, and fullscreening in and out works: http://banehq.com/Correct/Placeholdername/main.html.
一旦play
被第一次点击,游戏就会初始化并执行它的start
方法.一旦全屏退出,游戏的 stop
方法就会被执行.每隔一次play
被点击,游戏只执行它的start
方法,因为不需要再次初始化.
Once play
is clicked the first time, the game initializes and it's start
method is executed. Once the fullscreen exits, the game's stop
method is executed. Every other time that play
has been clicked, the game only executes it's start
method, because there is no need for it to be initialized again.
外观如下:
var playLinkHasBeenClicked = function()
{
if (!started)
{
started = true;
game = new Game(container); //"container" is an empty div
}
game.start();
}
这里是 start
和 stop
方法的样子:
And here's how the start
and stop
methods look like:
self.start = function()
{
self.container.appendChild(game.renderer.domElement); //Add the renderer's domElement to an empty div
THREEx.FullScreen.request(self.container); //Request fullscreen on the div
self.renderer.setSize(screen.width, screen.height); //Adjust screensize
self.startAnimating();
}
self.stop = function()
{
self.container.removeChild(game.renderer.domElement); //Remove the renderer from the div
self.renderer.setSize(0, 0); //I guess this isn't needed, but welp
self.stopAnimating();
}
这个版本和工作版本的唯一区别是startAnimating
和stopAnimating
方法调用在start
和stop
方法被注释掉.
The only difference between this and the working version is that startAnimating
and stopAnimating
method calls in start
and stop
methods are commented out.
推荐答案
所以,在做了更多测试之后,我发现确实是我的其他代码造成了问题,而不是动画停止(它毕竟是一个简单的递归).问题在于从页面动态添加和删除渲染器的 domElement.在我停止这样做之后,因为真的没有理由这样做,并且在初始化发生的地方包含它一次,一切开始正常工作.
So, after doing some more testing, I've found out that it was, indeed, my other code that posed a problem, not the animation stopping (it was a simple recursion after all). The problem was in dynamically adding and removing the renderer's domElement from the page. After I've stopped doing that, for there was really no reason to do so, and included it once where the initialization was happening, everything started working fine.
这篇关于如何停止 requestAnimationFrame 递归/循环?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!