我正在使用 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方法被注释掉。