Jump to content

FullScreen


juanmajr93
 Share

Recommended Posts

Hello,

You can check my code on Sponza:

var renderingZone = document.getElementById("renderingZone");
var isFullScreen = false;

document.addEventListener("fullscreenchange", onFullScreenChange, false);
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
document.addEventListener("msfullscreenchange", onFullScreenChange, false);

function onFullScreenChange() {
    if (document.fullscreen !== undefined) {
        isFullScreen = document.fullscreen;
    } else if (document.mozFullScreen !== undefined) {
        isFullScreen = document.mozFullScreen;
    } else if (document.webkitIsFullScreen !== undefined) {
        isFullScreen = document.webkitIsFullScreen;
    } else if (document.msIsFullScreen !== undefined) {
        isFullScreen = document.msIsFullScreen;
    }
}

switchFullscreen = function () {
    if (!isFullScreen) {
        BABYLON.Tools.RequestFullscreen(renderingZone);
    }
    else {
        BABYLON.Tools.ExitFullscreen();
    }
};

Please note you can't force a full screen by code. It must be user initiated (for security reasons). This means that the code that will switch the canvas to full screen must live behing an user's action such as clicking on a button.

David

Link to comment
Share on other sites

  • 5 months later...

Hello Babylonjs friends. Hello David.davrous.

I looked at this thread. I also want to put in 'fullscree'n my 3D scene.

Sadly, even if I tryed to code the same as David Sponza demo, (code it in this thread,),

when I click on my 'fu screen button', it says this in the javascript console :

==> La requête d’accès au plein écran a été refusée, car au moins l’un des éléments contenus dans le document n’est pas un iframe ou ne possède pas l’attribut « allowfullscreen ».

In English(via google translate)  : 

he full-screen access request was denied because at least one of the elements contained in the document is not an iframe or does not have the attribute "allowfullscreen".

I am 10% stuck with this problem. If someone has an idea, do not hesitate: do give it.

 

A] Here is the link :

http://free-visit.net/index.php/fr/23-modules-positions-50/building-entrance-webgl

B] Here is my code:

1) the html file:

  <style>
            html, body {
                overflow: hidden;
                width: 70%;
                height: 86%;
                margin: 0;
                padding: 0;
        allowfullscreen: true />
            }

            #renderCanvas { 
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script >

2) the javascipt code to go fullscreen:


 
loader.onFinish = function() {
// --> Code pour gérer le fullscreen :
// New :
alert("25a) avant les declarations des differents 'fullscreenchange' ");
canvas.addEventListener("fullscreenchange", onFullScreenChange, false);
canvas.addEventListener("mozfullscreenchange", onFullScreenChange, false);
canvas.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
canvas.addEventListener("msfullscreenchange", onFullScreenChange, false);
alert("25b) apres les declarations des differents 'fullscreenchange' ");
// --> Bouton pour mettre en full-screen :
btGoFullScreen = new bGUI.GUIPanel("btGoFullScreen", assets["icBtGoFullScreen"], null, gui);
btGoFullScreen.relativePosition(new BABYLON.Vector3(0.97, 0.96 , 0));
btGoFullScreen.setVisible(true);
btGoFullScreen.onClick = function() {
    alert("25a) Avant lancement goFullScreen() ");
    //engine.switchFullscreen(true);
    switchFullscreen();
    //goFullScreen();
    alert("25b) Apres lancement goFullScreen()");
}

};
// (fin)  loader.onFinish...

 

function onFullScreenChange() {
 alert("26a) Debut fonction onFullScreenChange()!");
    if (canvas.fullscreen !== undefined) {
         isFullScreen = canvas.fullscreen;
   } else if (canvas.mozFullScreen !== undefined) {
         isFullScreen = canvas.mozFullScreen;
   } else if (canvas.webkitIsFullScreen !== undefined) {
         isFullScreen     = canvas.webkitIsFullScreen;
   } else if (canvas.msIsFullScreen !== undefined) {
         isFullScreen = canvas.msIsFullScreen;
    }
 alert("26b) Fin fonction onFullScreenChange()!");

}
/* function qui lance l'EVT RequestFullScreen ou ExitFullScreen sur canvas !
*/
function switchFullscreen(){
    alert("switchFullscreen>>debut  ");
    if (!isFullScreen) {
        BABYLON.Tools.RequestFullscreen(canvas/*renderingZone*/);
    }
    else {
        BABYLON.Tools.ExitFullscreen();
    }
    alert("switchFullscreen>>fin  ");

};
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...