Я использую Three.js с визуализатором WebGL для создания игры, в которой полноэкранные экраны при нажатии ссылки play
. Для анимации я использую 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
, все ломается! Ошибок не сообщалось, хотя...
Настройка в основном такова:
- На странице есть ссылка
play
- Как только пользователь нажимает на ссылку, рендерер
domElement
должен иметь полноэкранный режим, и он выполняет - Вызывается метод
startAnimating
, и рендеринг начинает рисовать материал - После щелчка по экрану я регистрирую событие
fullscreenchange
и выполняю методstopAnimating
- Страница пытается выйти из полноэкранного режима, но весь документ полностью пуст.
Я уверен, что мой другой код в порядке, и я как-то останавливаю requestAnimationFrame
неправильно. Мое объяснение, вероятно, было сосано, поэтому я загрузил код на свой сайт, вы можете увидеть, как это происходит здесь: http://banehq.com/Placeholdername/main.html.
Вот версия, в которой я не пытаюсь вызвать методы анимации, и полноэкранная работа внутри и снаружи: http://banehq.com/Correct/Placeholdername/main.html.
После первого нажатия кнопки play
, игра инициализируется и выполняется start
. После выхода из полноэкранного режима выполняется игра stop
. Каждый раз, когда нажата кнопка play
, игра выполняет только этот метод start
, потому что нет необходимости снова ее инициализировать.
Вот как это выглядит:
var playLinkHasBeenClicked = function()
{
if (!started)
{
started = true;
game = new Game(container); //"container" is an empty div
}
game.start();
}
И вот как выглядят методы start
и stop
:
self.start = function()
{
self.container.appendChild(game.renderer.domElement); //Add the renderer 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
комментируются.