Jump to content

Babylon.js in responsive


Recommended Posts

Dear all,  we are working on this platform that is in Babylon.js and React:


Unfortunately it works only on some mobile devices but not on all. How can we fix this?

We had the basic model in Three.Js and it worked fine across mobile devices but we achieved all our functionality in Babylon. How can we make it work like this: https://www.grafosdesign.com/3dVisual_Interact/BioracerDEMO/index.html

Thank you for you ideas/input


Link to comment
Share on other sites

Hi, center in all orientation/resolutions.

var ancho=1920;//width

var alto=1080;//height

function rPantalla() {
    var gameWidth = window.innerWidth;
    var gameHeight = window.innerHeight;
    var scaleToFitX = gameWidth/ancho ;
    var scaleToFitY =  gameHeight/alto ;

    var currentScreenRatio = gameWidth / gameHeight;
    var optimalRatio = Math.min(scaleToFitX, scaleToFitY);

    if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) {
        //16/9 aspect
        canvas.style.width = gameWidth + "px";
        canvas.style.height = gameHeight + "px";
        canvas.style.left = ((gameWidth - (ancho * optimalRatio))/2)+"px";
        canvas.style.top = ((gameHeight - (alto * optimalRatio))/2)+"px";        
        console.log("a "+canvas.style.left);
    }else {
            canvas.style.left = ((gameWidth - (ancho * optimalRatio))/2)+"px";
            canvas.style.top = ((gameHeight - (alto * optimalRatio))/2)+"px";
            canvas.style.width = ancho * optimalRatio + "px";
            canvas.style.height = alto * optimalRatio + "px";
    //    console.log("b "+canvas.style.left);
    scaleX = ancho/(gameWidth-(gameWidth-(ancho*optimalRatio)));//I use this for events, but it may not be necessary
    scaleY = alto/(gameHeight-(gameHeight - (alto*optimalRatio)));
    //console.log("scale x "+scaleX+" scaley "+scaleY);
    console.log("width "+ancho+" height "+alto);
    dataRatio.offx = parseInt(canvas.offsetLeft);
    dataRatio.offy = parseInt(canvas.offsetTop);
} //fin de rPantalla : redimensionar la pantalla (end of resizing display)

function init(){
    dPantalla.w = window.innerWidth;
    dPantalla.h = window.innerHeight;
    dPantalla.rx = ~~(dPantalla.w/2);
    dPantalla.ry = ~~(dPantalla.h/2);
    canvas = document.getElementById('canvas1');

   //event resize, also change orientation

window.addEventListener("resize", function () {
        setTimeout(rPantalla,300);//important this async
}, false);


//end of init 

if you need more aspect ratios, tell me.

Link to comment
Share on other sites

  • 2 weeks later...

Hola diyo_games! Gracias por tu respuesta. 

We followed your advice and we did the following:

1. We updated Babylon to the last version with the CDN. We had  2.2 and now we have preview version of 4.0, and it works perfectly.
2. With the code and info you sent we have the following questions:
  • We changed the id to find the canvas for the one I consider to be our canvas..
  • We added the code in the init function
  • and in the rPantalla function the variable "playing" can't be found by the system.
We uploaded the code with these errors here:
Any ideas/hints on how to fix these errors?
Thank you very much for your help @grafosdesign :)
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.

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.


  • Recently Browsing   0 members

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