如何使 Three.js 全屏? [英] How to make Three.js fullscreen?

问题描述

我想用 Three.js 制作一个游戏，但如何让它全屏显示?我看到了这篇文章，并且我在我的代码中包含了 THREEx，但是当我这样做时:THREEx.FullScreen.request() 什么也没有发生！我看了一下THREEx的代码，为了调试，改成这样:

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:

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".但是——没什么！控制台中没有错误消息或任何东西......我已经尝试过他的池示例，它有效，所以我很确定这不是我的电脑的错......

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...

推荐答案

你必须:

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

1. 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.
2. Request fullscreen on an element, not document.
3. Call request with this set to THREEx.FullScreen (so just call it like below).

例如:

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

这篇关于如何使 Three.js 全屏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！