Problems combining Babylon and Bootstrap

Questions
1

Bootstrap requires:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
for mobile support, without it, the bootstrap navbars and so are really small. Unfortunately, it also brokes the interface generated with Babylon (BABYLON.GUI.Image in a GUI) is there any way to make both compatible?

Also, a bootstrap simple alternative is welcome. Thank you in advance.

2

What does it cause to Babylon GUI? can you share more on that?

3

It renders at wrong size some parts, the general appearance was fixed just by using engine.setHardwareScalingLevel(DesiredHardwareScaling);

but displayLoadingUI was wrong yet, anyway I managed it by scaling in advance the sizes using again DesiredHardwareScaling

I’m looking for the best way to create screen hotspots like in marzipano Sample Tour | Marzipano

Thank you!

1 Like
4

This is very definitely still an issue. As soon as you use any bootstrap classes, babylon fails to render anything. It’s even worse because the issue can’t seemingly be replicated in CodePen, but happens just editing it on Windows, even with Notepad.

However, the hacky workaround I did was simply to set the element style on the surrounding div and that seemed to solve it.

That then led to the question of whether there was a height override somewhere and it did seem to be the case. Sure enough, if you set !important tag on the height CSS class, it respects it. Otherwise, it does not.

//… This does not work

babylon { width: 100%; height: 100vh; }

But

// This WORKS!

babylon { width: 100%; height: 100vh !important; }

Note, this doesn’t happen when bootstrap isn’t used!

One that doesn’t work:

<html lang="en">

    <head>
                <meta charset="UTF-8">
        <title>BabylonJS Viewer - Enable VR</title>
                <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<style>
babylon {
width: 100%;
}

</style>
    </head>
    <body>
      <div class="row">
          <babylon id="babylon-viewer" model="https://models.babylonjs.com/boombox.glb">
            </div>
    </body>

</html>

Another one that doesn’t work:

<head>
            <meta charset="UTF-8">
    <title>BabylonJS Viewer - Enable VR</title>
            <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script>
babylon { width: 100%; height: 100vh; } 
</head>
<body>
  <div class="row">
      <babylon id="babylon-viewer" model="https://models.babylonjs.com/boombox.glb">
        </div>
</body>

The one that does work:

<head>
            <meta charset="UTF-8">
    <title>BabylonJS Viewer - Enable VR</title>
            <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script>
babylon { width: 100%; } 
</head>
<body>
  <div class="row" style="height: 100vh">
      <babylon id="babylon-viewer" model="https://models.babylonjs.com/boombox.glb">
        </div>
</body>
5

this is quite a different issue.

In this case you are trying to get the viewer’s container to work, and bootstrap’s init of body and div.row prevents you from achieving that.

You will need to make sure the viewer’s container has a predefined height and width, even when using any view framework like bootstrap or materialize. And you will need to accept the view framework’s way of dealing with containers :slight_smile:

2 Likes