如何制作Three.js全屏？

问题描述

我想用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. 请求元素全屏，而不是文档。


3. 调用请求，此设置为 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全屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！