如何使 Three.js 全屏？答案

【问题标题】：How to make Three.js fullscreen?如何使 Three.js 全屏？
【发布时间】：2012-05-27 04:15:23
【问题描述】：

我想用 Three.js 制作一个游戏，但是如何让它全屏显示呢？我看到了this article，并且在我的代码中包含了 THREEx，但是当我这样做时：THREEx.FullScreen.request() 没有任何反应！我查看了 THREEx 代码，并将其更改为这样，以进行调试：

THREEx.FullScreen.request   = function(element)
{
    element = element   || document.body;
    if( this._hasWebkitFullScreen ){
        element.webkitRequestFullScreen();
        console.log("f");
    }else if( this._hasMozFullScreen ){
        element.mozRequestFullScreen();
        console.log("g");
    }else{
        console.assert(false);
    }
}

因此，这默认为使 document.body 全屏，并在控制台中打印“f”。但是——什么都没有！控制台中没有错误消息或任何东西......我已经尝试了他的池示例，它有效，所以我很确定这不是我的电脑的错......

【问题讨论】：

你什么时候打电话？我相信您只能请求作为对用户输入的反应，例如 keydown 事件。
真的吗？这很奇怪，我不明白......但会的！
当我这样写时：document.addEventListener("keydown", THREEx.FullScreen.request);，我收到“断言失败”的错误。
您不能要求文档全屏显示，因为它不是一个元素。试试document.body。
该函数使用this，如果您直接传递该函数，它将（错误地）成为文档。试试function() { THREEx.FullScreen.request(); }（不一样）。

标签： javascript html 3d fullscreen three.js

【解决方案1】：

你必须：

在用户允许时请求，例如在keydown。我想原因与打开弹出窗口相同。一个网页自行随机切换全屏可以说比弹出窗口自动打开更烦人。
在元素上请求全屏，而不是 document。
调用request 并将this 设置为THREEx.FullScreen（所以只需像下面这样调用它）。

例如：

document.body.addEventListener("keydown", function() {
  THREEx.FullScreen.request();
}, false);

【讨论】：