How to make Three.js fullscreen?

Question

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

Answer 1

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