# Skybox texture is not displayed

**URL:** <https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970>\
**Category:** Questions\
**Tags:** material, sky\
**Created:** [September 20, 2021, 5:44pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970 "2021-09-20T17:44:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dnosur](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dnosur/32/18778_2.png) [@dnosur](https://forum.babylonjs.com/u/dnosur)\
**Post date:** [September 20, 2021, 5:44pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/1 "2021-09-20T17:44:55Z")

</div>

I just started learning Babylon JS and I ran into a problem. While studying this example([https://playground.babylonjs.com/#1SLLOJ#17](https://playground.babylonjs.com/#1SLLOJ#17)), I noticed that the texture applied to the skybox is not displayed. I get an empty black cube. This error occurs precisely in the loaded project. All textures are stored in this one

 ![2021-09-20_204334](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/5/35bc1093b7c230da48d41a086143c93c29db190b.jpeg)  
Here is the JS code itself:

```auto
var canvas = document.getElementById("renderCanvas");

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
    
        var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 4, 100, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true, false);
    
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        
        // Skybox
        var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay_nz", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.disableLighting = true;
        skybox.material = skyboxMaterial;
            
        // Water
        var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 2048, 2048, 16, scene, false);
        var water = new BABYLON.WaterMaterial("water", scene, new BABYLON.Vector2(512, 512));
        water.backFaceCulling = true;
        water.bumpTexture = new BABYLON.Texture("textures/waterbump.png", scene);
        water.windForce = -10;
        water.waveHeight = 1.7;
        water.bumpHeight = 0.1;
        water.windDirection = new BABYLON.Vector2(1, 1);
        water.waterColor = new BABYLON.Color3(0, 0, 221 / 255);
        water.colorBlendFactor = 0.0;
        water.addToRenderList(skybox);
        waterMesh.material = water;
    
        return scene;
    }
            window.initFunction = async function() {
                
                
                var asyncEngineCreation = async function() {
                    try {
                    return createDefaultEngine();
                    } catch(e) {
                    console.log("the available createEngine function failed. Creating the default engine instead");
                    return createDefaultEngine();
                    }
                }

                window.engine = await asyncEngineCreation();
    if (!engine) throw 'engine should not be null.';
    window.scene = createScene();};
    initFunction().then(() => {sceneToRender = scene        
        engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
                sceneToRender.render();
            }
        });
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });

```

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 20, 2021, 7:01pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/2 "2021-09-20T19:01:19Z")

</div>

You have “textures/TropicalSunnyDay\_nz” instead of “textures/TropicalSunnyDay”

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [September 20, 2021, 7:02pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/3 "2021-09-20T19:02:19Z")

</div>

Couple suggestions for debugging:

1. Check your console output. Usually if a texture failures to load you will get an error message.
2. Use the inspector. [The Inspector | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/toolsAndResources/tools/inspector) This will allow you to select your texture and check if the image data actually loaded or not

This can help narrow things down a bit. One guess: the browser often does not load local files for security reasons. If you want to reference assets on your local hard drive, you will need to run a webserver. [serve - npm (npmjs.com)](https://www.npmjs.com/package/serve) is a great tool for this which lets you serve a directory with a single command.

---

<div class="post-metadata">

**Author:** ![dnosur](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dnosur/32/18778_2.png) [@dnosur](https://forum.babylonjs.com/u/dnosur)\
**Post date:** [September 21, 2021, 5:46pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/5 "2021-09-21T17:46:27Z")

</div>

There are no textures with this name in the folder

 ![2021-09-20_204334](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/5/35bc1093b7c230da48d41a086143c93c29db190b.jpeg)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 21, 2021, 6:01pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/6 "2021-09-21T18:01:39Z")

</div>

Yes, it does not need too by design as faces suffix are automatically added: [Reflections and Refractions | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/using/reflectionTexture#static-environment-maps-cubetexture-and-friends)

---

<div class="post-metadata">

**Author:** ![dnosur](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dnosur/32/18778_2.png) [@dnosur](https://forum.babylonjs.com/u/dnosur)\
**Post date:** [September 21, 2021, 6:23pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/7 "2021-09-21T18:23:44Z")

</div>

I have started a web server and am using the inspector. I got it

 ![2021-09-21_211831](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/f/8f8edea0c8fecb1071a34eba41dc81b5f4920181.jpeg)

---

<div class="post-metadata">

**Author:** ![dnosur](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dnosur/32/18778_2.png) [@dnosur](https://forum.babylonjs.com/u/dnosur)\
**Post date:** [September 21, 2021, 6:24pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/8 "2021-09-21T18:24:15Z")

</div>

Here is the same texture

 ![2021-09-21_211905](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/7/d7d4435f663c32cc5c38fbf136c11b64a7699999.jpeg)

---

<div class="post-metadata">

**Author:** ![dnosur](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dnosur/32/18778_2.png) [@dnosur](https://forum.babylonjs.com/u/dnosur)\
**Post date:** [September 21, 2021, 6:25pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/9 "2021-09-21T18:25:46Z")

</div>

If I load the texture into “Add reflection texture”, I get this

 ![2021-09-21_212201](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/b/fbe8f7c06e95cc35626a488aa95b55ccc42255d3.jpeg)

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [September 21, 2021, 6:26pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/10 "2021-09-21T18:26:31Z")

</div>

Did you try @sebavan’s suggestion to load “TropicalSunnyDay” without the face suffix? I think right now it is probably attempting to load “TropicalSunnyDay\_nz\_nz.png”, “TropicalSunnyDay\_nz\_nx.png”, etc. and not finding any files with those names.

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [September 21, 2021, 9:02pm UTC](https://forum.babylonjs.com/t/skybox-texture-is-not-displayed/23970/11 "2021-09-21T21:02:56Z")

</div>

_skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(“textures/ **TropicalSunnyDay** ”, scene);_

This will work for sure. Make sure you have cleared the browser cache before (CTRL + F5) you never know.