How to enter fullscreen in three.js?

Question

I have tried tens of different methods for hours and NONE works, like the following:

document.body.addEventListener("keydown", function() {
  THREEx.FullScreen.request();
}, false);

How to make Three.js fullscreen?

1. First of all, THREEx is NOT THREE.js. I don't want somebody's extension (which isn't even written completely and clarified)
2. The word "fullscreen" does not exist in three.js files, at all.
3. No three.js books mention how to go fullscreen either.
4. In my case, all the js and webgl code resides in a JS file, NOT in HTML if that matters.

So, is this possible at all?

Answer 1

I have a project with three.js scene contained in a div and I added a button to stretch it to fullscreen mode (and back). It would be nice if Three.js had a functionality implemented on one function call, but its not too difficult to add it manually.

Few things to consider:

1. Browser has fullscreen mode (F11 in Chrome), there is an API that can be called from the code to make browser enter full screen, so you can do it on button click. When browser goes full screen tabs and task bar are gone and all screen estate is available for your HTML page.

       function openFullscreen() {
         var elem = document.getElementById("id-webglcanvas");
         if (elem.requestFullscreen) {
           elem.requestFullscreen();
         } else if (elem.mozRequestFullScreen) { /* Firefox */
           elem.mozRequestFullScreen();
         } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
           elem.webkitRequestFullscreen();
         } else if (elem.msRequestFullscreen) { /* IE/Edge */
           elem.msRequestFullscreen();
         }
         elem.style.width = '100%';
         elem.style.height = '100%';
       }
   

2. Three.js scene (renderer, canvas) is inside some div element. It is created as canvas element by three.js lib and appended as a child element with 'appendChild'. Inspect your div element and you will see canvas child there. This div element can have its own width and height, but scene/canvas width and height are set using renderer.setSize function and its independent from div.

       renderer = new THREE.WebGLRenderer( { antialias: true } );
       renderer.setSize(sceneWidth, sceneHeight);
       var threeJSCanvas = document.getElementById("id-webglcanvas");
       threeJSCanvas.appendChild( renderer.domElement );
   

3. When you tell your browser to go full screen, at the same time you want to set your scene div height and width to full screen size (but most importantly its position to start from 0,0) plus you must set your renderer size to fullscreen height and width. You may want to hide some other div elements on the page, like overlay GUI - so your whole page becomes practically just div with renderer. Chances are, you already have 'onWindowResize' function implemented that changes the renderer width and height when browser window is resized, if this is the case you will have to make this function play nice with fullscreen mode because - it will be called automatically. So make this function your ally.

       window.addEventListener( 'resize', onWindowResize, false );
       function onWindowResize() {
           if ( myGlobalFullscreenModeVariable) {
               var elem = document.getElementById("id-webglcanvas");
               var sceneWidth = window.innerWidth;
               var sceneHeight = elem.offsetHeight;
               camera.aspect = sceneWidth / sceneHeight;
               camera.updateProjectionMatrix();
               renderer.setSize( sceneWidth, sceneHeight );
           } else {
               // my other resize code
           }
       }
   

4. When user leaves full screen mode you have to revert things back manually. Change the div and renderer size back, show hidden elements, etc. User can leave fullscreen in two ways - by pressing your gui button or esc button. You can define function that is called when fullscreen mode is changed, but you need to add it as event listener.

       if (document.addEventListener)
       {
           document.addEventListener('webkitfullscreenchange', fsChangeHandler, false);
           document.addEventListener('mozfullscreenchange', fsChangeHandler, false);
           document.addEventListener('fullscreenchange', fsChangeHandler, false);
           document.addEventListener('MSFullscreenChange', fsChangeHandler, false);
       }
       function fsChangeHandler()
       {
           if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== undefined) {
               /* Run code when going to fs mode */
           } else {
               /* Run code when going back from fs mode */
           }
       }
   

This code is not ready to work out of the box because you may have different page setup, but it does list all that you have to think about to make this work.

Answer 2

Maybe the answer on this thread will help: Three.js Full Screen Issue

In short the answer is:

set display: block; on canvas element in your CSS