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 puter's fault...

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 puter's fault...

• javascript
• html
• 3d
• fullscreen
• three.js

• 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 Commented May 20, 2012 at 9:11
• Really? That's strange, I don't get it... But will do! – corazza Commented May 20, 2012 at 9:17
• When I write it like this: document.addEventListener("keydown", THREEx.FullScreen.request);, I get an error that "assertion failed." – corazza Commented May 20, 2012 at 9:21
• You can't request the document to go fullscreen as it isn't an element. Try document.body. – pimvdb Commented May 20, 2012 at 9:27
• 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 Commented May 20, 2012 at 9:33

2 Answers 2

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

I use this:

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

..then 'm' toggles fullscreen.