How to make a picture as background with native ratio

I try to use a picture as a static background in my scene. No matter how the camera rotates, the picture always has a proper ratio as the background. If the width of the photo will be larger than the width of the screen. I hope that the width of the photo will always be Fit the screen width, then reduce the height of the photo, leave the top and bottom blank. I have make the picture as background,but i do not how to adapt the ratio

https://playground.babylonjs.com/#UU7RQ#1974

The demo you have provided is the skybox demo, which technically does what you are expecting (I assume?). it is not fixed to the screen’s ratio, but fixed to the 3D scene - which is what babylon can do for you. The engine itself knows the size of the canvas, but there is no native way of setting a mesh / texture to always be the same ratio as your screen.
My recommendation for you is to instead of trying to calculate that constantly, use a background iamge for your canvas instead. after all, we are still using HTML here. set the canvas’ background image, and set your scene’s clear color to be transparent. something like this:

? | Babylon.js Playground (babylonjs.com)

5 Likes