Responsive Web Page

Questions
1

Could someone give me some pointers how to put a Babylon model into a flex-container on a web page. I am just looking for the code that puts the ‘canvas’ into the container thus making the canvas responsive - or is there another way.

Thanks

Richard C

2

You don’t need anything special.

<div class="container">
  <canvas id="babylon" class="canvas"></canvas
</div>

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.canvas {
  flex: 1;
  display: block;
}

Then when the user updates the size of the window. you need to call engine.resize()
which will resize everything.

It is a good idea to use debounce on the resize so that you don’t hammer the engine with resize events.

1 Like
3

Thanks Leon

4

I have the container and canvas that Leon advised
Of the following code the line

myScene = new BABYLON.Scene(engine);

is throwing an error ‘webGL not supported’:

Capture
Capture.JPG515×571 37.3 KB

I do not get the webGl error message in any other babylon application - my machine is webGL is enabled in chrome

Thanks

Richard C

5

Can you share the code on jsfiddle for instance?

6

My mistake. I had failed to populate canvas, ie canvas = document.getElementById(“renderCanvas”);

1 Like
7

Glad that you found it

8

Hi there, I have the same issue, but your css is not working for me.
I have seen your playground inspector, and when I resize the window, I can see in live the width and the height of the canvas changing.
Can you give me the css of your canvas on your example or how did you do that pls :slight_smile: I have spent my day to try to render my canvas responsive in my application…
thank you !
I would like to fit the container and so the container should resizing too. It’s not a fullscreen resize…
@Deltakosh @Wingnut