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
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:
5 Likes
Is it possible to use pure 3d instead of css as the scene background? Is there a feasible technical solution
One may use Layers - Layer | Babylon.js Documentation
Example - https://playground.babylonjs.com/#08A2BS#86
1 Like
Well, this is a good solution 
ratio changes using layers, and set scale will clip the image instead of scaling