3

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);
    }
}

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

dariush
  • 3,191
  • 3
  • 24
  • 43
corazza
  • 31,222
  • 37
  • 115
  • 186
  • 1
    When are you calling it? I believe you're only allowed to request as a reaction to user input such as the `keydown` event. – pimvdb May 20 '12 at 09:11
  • Really? That's strange, I don't get it... But will do! – corazza May 20 '12 at 09:17
  • When I write it like this: `document.addEventListener("keydown", THREEx.FullScreen.request);`, I get an error that "assertion failed." – corazza May 20 '12 at 09:21
  • You can't request the document to go fullscreen as it isn't an element. Try `document.body`. – pimvdb May 20 '12 at 09:27
  • I'm not, the code defaults to making the body fullscreen if no other element is supplied. – corazza May 20 '12 at 09:32
  • 1
    The function uses `this` which will (incorrectly) be the document if you pass the function directly. Try `function() { THREEx.FullScreen.request(); }` (it is different). – pimvdb May 20 '12 at 09:33
  • Great, it works now! Please, answer the question with that snippet of code and so on, so I can accept it. – corazza May 20 '12 at 11:13
  • Here is my answer to similar thread: https://stackoverflow.com/a/53585584/2573640 – pera Dec 02 '18 at 23:59

2 Answers2

5

You have to:

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

So e.g.:

document.body.addEventListener("keydown", function() {
  THREEx.FullScreen.request();
}, false);
pimvdb
  • 151,816
  • 78
  • 307
  • 352
0

I use this:

THREEx.FullScreen.bindKey({ charCode: 'm'.charCodeAt(0) });

..then 'm' toggles fullscreen.

spooch
  • 21
  • 1
  • 3