Skybox texture is not displayed

[dnosur]

I just started learning Babylon JS and I ran into a problem. While studying this example(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

Here is the JS code itself:

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();
    });

[sebavan]

You have “textures/TropicalSunnyDay_nz” instead of “textures/TropicalSunnyDay”

[DarraghBurke]

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) 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) is a great tool for this which lets you serve a directory with a single command.

[dnosur]

There are no textures with this name in the folder

[sebavan]

Yes, it does not need too by design as faces suffix are automatically added: Reflections and Refractions | Babylon.js Documentation

[dnosur]

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

[dnosur]

Here is the same texture

[dnosur]

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

[DarraghBurke]

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.

[Dad72]

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.