如何制作Three.js全屏？

Question

我想用Three.js制作一款游戏,但我该如何制作全屏？我看到了这篇文章,我在我的代码中包含了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".但是 - 没什么!控制台或其他任何东西都没有错误消息......我已经尝试了他的游泳池示例,它可以工作,所以我很确定这不是我的电脑的错...

Answer 1

你必须:

1. 用户允许的请求,例如打开keydown.我猜这个推理与打开弹出窗口相同.一个自动随机切换全屏的网页可能比弹出自动打开更烦人.
2. 请求全屏显示元素,而不是document.
3. 调用request与this设置为THREEx.FullScreen(所以只是把它像下图).

例如:

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