Getting Started - Chapter 5 - Skies Above

We can simulate the appearance of a sky by applying six suitable images to the insides of a large skybox cube. (Images are a lot easier and faster to render than 3D objects, and just as good for far-distant scenery.)

Skybox images are usually loaded with CubeTexture. CubeTexture's constructor takes a base URL and (by default) appends "_px.jpg", "_nx.jpg", "_py.jpg", "_ny.jpg", "_pz.jpg", and "_nz.jpg" to load the +x, -x, +y, -y, +z, and -z facing sides of the cube.

some cloudsmore cloudsthe sun overheadsolid graymore cloudsmore clouds
some clouds
more clouds
the sun overhead
solid gray
more clouds
more clouds

Cube textures must be applied using reflectionTexture even though the skybox is not a reflection map. Setting coordinatesMode to SKYBOX_MODE paints the texture directly on the cube rather than simulating reflections.

const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:150}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;

We also restrict the camera so that it cannot move below ground level.

camera.upperBetaLimit = Math.PI / 2.2;
Adding a Skybox

After making a sky, the next environmental improvement is to grow some trees.

Further reading