我将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'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
方法被注释掉。
cancelAnimationFrame
代替cancelRequestAnimationFrame
吗?