Как остановить рекурсию / цикл requestAnimationFrame?
Я использую Three.js с рендерером WebGL, чтобы создать игру, которая открывается в полноэкранном режиме при play нажатии на ссылку. Для анимации я использую requestAnimationFrame .
Когда я хочу, я вызываю startAnimating метод, и да, он работает так, как задумано. Но когда я вызываю stopAnimating функцию, все ломается! Однако сообщений об ошибках нет .
Настройка в основном такая:
- На play странице есть ссылка
- Как только пользователь щелкает ссылку, средство визуализации domElement должно работать в полноэкранном режиме, и оно
- Вызывается startAnimating метод, и рендерер начинает рендеринг материала
- После нажатия кнопки escape я регистрирую fullscreenchange событие и выполняю stopAnimating метод
- Страница пытается выйти из полноэкранного режима, это происходит, но весь документ полностью пустой.
Я почти уверен, что мой другой код в порядке, и что я почему-то останавливаюсь requestAnimationFrame не так. Мое объяснение, вероятно, было отстойным, поэтому я загрузил код на свой веб-сайт, вы можете увидеть это здесь: http://banehq.com/Placeholdername/main.html .
Вот версия, в которой я не пытаюсь вызывать методы анимации, а полноэкранный режим работает и работает: http://banehq.com/Correct/Placeholdername/main.html .
После play первого щелчка игра инициализируется, и ее start метод выполняется. После выхода из полноэкранного режима выполняется stop метод игры . Каждый раз, play когда щелкнули, игра выполняет только свой start метод, потому что нет необходимости в его повторной инициализации.
Вот как это выглядит:
И вот , как start и stop методы выглядеть следующим образом :
Единственное различие между этим и рабочей версией является то , что startAnimating и stopAnimating методами звонки в start и stop методы закомментировано.
Как остановить запросAnimationFrame рекурсия / цикл?
Я использую Three.js с рендерером WebGL, чтобы создать игру, которая работает на весь экран при нажатии на ссылку play . Для анимации я использую requestAnimationFrame .
Я начинаю это так:
Когда я хочу, я вызываю метод startAnimating , и да, он работает как задумано. Но когда я вызываю функцию stopAnimating , все обрывается! Там нет сообщений об ошибках, хотя .
Настройка в основном так:
- На странице есть ссылка play
- Когда пользователь нажимает на ссылку, domElement рендерера должен работать в полноэкранном режиме, и это делает
- Вызывается метод startAnimating , и средство визуализации начинает рендеринг
- После нажатия escape я регистрирую событие fullscreenchange и выполняю метод stopAnimating
- Страница пытается выйти из полноэкранного режима, но это происходит, но весь документ полностью пуст
Я почти уверен, что мой другой код в порядке, и что я каким-то образом остановил requestAnimationFrame неправильно. Мое объяснение, вероятно, оказалось неудачным, поэтому я загрузил код на свой веб-сайт, и вы можете увидеть, что это происходит здесь: http://banehq.com/Placeholdername /main.html.
Вот версия, в которой я не пытаюсь вызывать методы анимации, и полноэкранный вход и выход работает: http: // banehq .com / Исправить / Placeholdername / main.html.
При первом нажатии play игра инициализируется и выполняется ее метод start . После выхода из полноэкранного режима выполняется игровой метод stop . Каждый раз, когда нажимается play , игра выполняет только свой метод start , потому что нет необходимости в его повторной инициализации.
Вот как это выглядит:
А вот как выглядят методы start и stop :
Единственная разница между этой и рабочей версией заключается в том, что методы startAnimating и stopAnimating вызовы в методах start и stop закомментированы.
How to stop a requestAnimationFrame recursion/loop?
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 .
I initiate it like this:
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.
The setup is basically like this:
- 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 the stopAnimating method
- The page tries to exit fullscreen, it does, but the entire document is completely blank
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.
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.
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.
Here’s how it looks:
And here’s how the start and stop methods look like:
The only difference between this and the working version is that startAnimating and stopAnimating method calls in start and stop methods are commented out.