Babylon.js with wordpress aspect ratio question

Hi, I want to display 2 bablyon.js viewers side by side on a WordPress site. They were created using the shortcode [babylon]. When I toggle to fullscreen in one viewer and then exit fullscreen so that it returns to the side by side viewers they are now different sizes.

Initially I thought this related to my theme not behaving well with babylon.js but I see the exact same resizing happening with the examples:
https://babylonpress.org/resources/utilities/babylon-wordpress-viewer-with-promises/
https://igiuk.com/babylon-3d-wordpress/category/3d-examples/
on the first time you toggle to full screen and back.

Is this expected functionality? Is there anyway round this? I don’t mind what aspect ratio the viewer used I just need it to stay consistent.
Thanks

Hello and welcome!

Not completely sure that I understand the question. Which browser do you use?
I have no problems with the pages you’ve mentioned.
Also, here is the example of 2 viewers with fullscreen function - Testing BabylonPress 3D Suite – BabylonPress . Does it work for you as expected? Could you make screenshot of the page before fullscreen and after (for me in Chrome browser there is no difference).

Hi Labris
Thanks for the assistance. I am using Chrome Version 89.0.4389.114

Its easiest to show with the example where the viewer doesnt take up the whole screen. Here is the before screenshot:

As a new user I can only include one embedded item, so will send the 2nd image in a different reply.

And after I toggle to full screen and back it looks like this

It has the same width but is taller. Feel I must be missing something basic but I dont know what it is.

Thanks for pointing.
Seems this is probably CSS template issue.
The same thing at the sample page BabylonJS Viewer - Basic usage
(after the fullscreen the height of the viewer is bigger).
Pinging @RaananW

@RaananW is in vacation this week, so please bear with us until next week :slight_smile:

1 Like

@sebavan I hope we are able to bear it :slight_smile:
So the problem is easy to reproduce at the sample page BabylonJS Viewer - Basic usage : after the first fullscreen the height of the viewer is bigger than initial one.

Next week is fine. Thanks

oh, it seems like the canvas adjusts to the fullscreen ratio instead of staying it the right ratio.

I will be able to check that in a week or so, but here is my assumption - instead of setting the width and height of the canvas to 100%, set it to the right dimensions. Only when it is in fullscreen (the class is added to the container), should it be 100% for both. This way the ratio should stay correct. But i have to admit i havent tested it :slight_smile: