Adapt resize functionality (e.g. on fullscreen)

CesiumJS
1

Hello all,

thanks for all your help until now, i have a bit of a nuisance, but it seems i can't let it go.

I have cesium in a small div (eg. 300x300px) quadratic showing the complete globe. When going into fullscreen the globe is cut at the top and the bottom of the screen (because the screen is wider the its height).

Trying out the resize functionality i can see that if a change the height of my window, the size of the globe is constant (i.e. when the height get small enough it just gets cut). But when changing the width of the window the globe changes size.

I have looked at the CesiumWidget.prototype.resize method and what gets called to understand what exactly is going on, but i cannot quite understand the different behavior of height and width re-sizing.

Can i modify or adapt the resize in any manner so that when going into fullscreen it would show more or less the same view? I.e. complete globe in the center?

I imagine the whole problem is in the change of aspect ratio from 1:1 to 16:9, so i don't know if there is a solution for this.
I played around with introducing some padding to the canvas element when resizing but then it gets cut on the sides when in full screen.

I would appreciate any thoughts on this,
kind regards,
Daniel
Have a nice weekend!

2

You can change the camera frustum’s field of view to force the same aspect ratio, but you’re probably going to see some fishbowl effects.

If you want to play around with it I recommend looking at these documents for the camera:

It’s probably better to listen for the fullscreen event being triggered and locking down the width of the viewer to be the height. That way you have a consistent experience.