如何制作Three.js全屏？

I want to make a game with Three.js, but how do I make it fullscreen? I saw this article, and I've included THREEx in my code, but when I do this: THREEx.FullScreen.request() nothing happens! I looked at the THREEx code, and changed it like this, for the purposes of debugging:

我想用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);
    }
}

So, this defaults to making document.body fullscreen, and it prints "f" in the console. But - nothing! There are no error messages in the console or anything... And I've tried his pool example, it works, so I'm pretty sure that it's not my computer's fault...

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

1 个解决方案

#1

You have to:

你必须:

Request when the user allows to, e.g. on keydown. I guess the reasoning is the same as opening popups. A web page toggling fullscreen randomly of its own accord is arguably even more annoying than popups opening automatically.

当用户允许时请求,例如在keydown。我猜这个推理与打开弹出窗口相同。一个自动随机切换全屏的网页可能比弹出自动打开更烦人。

Request fullscreen on an element, not document.

在元素上请求全屏,而不是文档。

Call request with this set to THREEx.FullScreen (so just call it like below).

使用此设置为THREEx.FullScreen的呼叫请求(所以只需在下面调用它)。

So e.g.:

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

#1