How to make Three.js fullscreen?
3d, fullscreen, html, javascript, three.js
Solution
You have to:
- 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.
- Request fullscreen on an element, not `document`.
- 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);
Problem
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...