[SOLVED] Changing Skybox / Cubemap during runtime not working

I want to switch skybox/cubemap at runtime but it doesn’t seem to work. At most, I get a monotonous white background when a new cubemap is loaded (the cubemaps are assigned via attributes). I’m not sure if it’s the code or PC in general has a problem with it (I found a lot of threads about it online, but no references that made it work for me)

I’ve linked the code below (but this is also one of many attempts that don’t work, but at least go through the loading process - even if the result is as described)

ChangeCubemap.attributes.add("skyboxs", { type: "asset", array: true });

// initialize code called once per entity
ChangeCubemap.prototype.initialize = function() {
    var index = -1;
    var preSkyBox;

    // loop skyBox
    if (++index >= this.skyboxs.length)
        index = 1;
    // // unload preSkyBox
    if (preSkyBox)
    // set skyBox
    preSkyBox = this.skyboxs[index];

// load and set skybox
ChangeCubemap.prototype.setSkyBox = function(skyBox) {
    if (!skyBox) {
        console.warn("Skybox asset is null.");
    } else if (skyBox.resource) {
        console.warn("Skybox is already loaded, no need to load again.");
    } else {
        console.log("Loading skybox...");
        skyBox.ready(function(asset) {
            console.log("Skybox loaded.");
            this.app.scene.skyboxMip = 1;
            this.app.scene.skyboxIntensity = 1;

        }, this);


var ChangeCubemap = pc.createScript('changeCubemap');

ChangeCubemap.attributes.add("skyboxs", { type: "asset", array: true });

// initialize code called once per entity
ChangeCubemap.prototype.initialize = function() {
    var app = this.app;
    var _cubemap = this.skyboxs[1];

    _cubemap.ready(function () {
            //app.scene.skybox = _cubemap.resource; // Set the skybox resource
            app.scene.skyboxMip = 0;
            app.scene.skyboxIntensity = 1;

Thanks for your help / suggestion!

Here’s a possible implementation


@ mvaligursky

thanks for your fast reply and the input. TBH: I saw all those nice examples but my problem is, that I dont know how to adapt the reference for my project.

Isnt there a simple way to do a skybox / cubemap change during runtime? :grimacing:

Could not solve this problem - my last attempt was to create some kind of cubemap on my own with planes and added the textures onto it. Seems to work in my case but im very frustrated, that a simple Skybox switch in playcanvas seems to be some kind of rocket sience.

This is how I’ve done it: https://playcanvas.com/project/1194998/overview/model-viewer

Press 1 to change skybox

1 Like

I’ve updated the project so that it loads the skybox assets on demand and uses the high quality textures (similar to what your code seems to suggest)


Reference thread: SkyBox Mipmap value change by code

1 Like


Many thanks for your help!

I copied the code into my project and it seems to work for the cubemaps of your example project that I also transferred. The thing is, my cubemap is configured like all the cubemaps you used in the model viewer example, or at least I think they are.

Is there anything I may have missed regarding cubemaps? When i use your cubemaps the texture switches fine - when using my cubemap it doesn’t work. Do they have to be HDRI images - ive checked all values and this was the only difference?

I also forked the project and added these cubemaps into your project - same result. But if I use the cubemap and put it directly in the skybox texture slot in the settings, my cubemap works too.

I’m completely confused as to what this is about.

But I have to say that I’m glad that it basically works - and it’s a lot easier than extracting it from the Playcanvas sample page, which I think is fundamentally slightly different in terms of structure.

Can you post an example project to take a look at?

Just figured it out. The customer provided .jpg Files but with .jpg it doesnt seems to work - so i converted it to png files and now its loading.

didnt know its a problem, because like i said if youre placing the .jpg cubemap straight via the settings into the skybox texture slot it works too. It seems to be a problem, when loading and assigning it via script.

I lost a whole day because of this, because i didnt expected the textures to be a part of the problem. :grimacing:

If you want i can provide you the example scene (basically i used your forked project for testing but it had the same issue behaviour like my main project).

now i know… :see_no_evil:

Might be worth having a look. I don’t think jpgs should be the problem offhand


here is the scene. Slot 4 is the png cubemap - slot 5 is the jpg cubemap


Not 100% sure what was the error but two things I did to ‘fix’ the issue:

  • Disabled preload from the cubemap asset so either all assets were loaded or not at all
  • Deleted and regenerated the prefiltered data on the cubemap


1 Like

Thats a thing i also dont understand - i disabled the preloading too (configured like on those cubemaps where it loads propper) during some tests but it hasnt made any difference. I could not tell you exactly why but when changing the texture to .png it worked directly and now even with jpg it seems to work (but both in the second loop of loading) - this is so weird. I can’t see any pattern yet and there is still some kind of questionmark above my head.

Thanks for providing the code - now iam able to choose witch solution i’ll go on (changing skybox or using my custom plane box :smiley: )


Could you do me a favor and replace the provided cubemap/graphic with another example cubemap within the “F@ Test Cubemap” project you created, if this example is still public and available for other users if they need a reference ?

Thanks! :slight_smile:

Do you just want me do delete the project?

No i think this could help some other people in terms of how to switch the skybox - so its basically a good reference.

I would have been happy if I had found such a scene yesterday :smiley:

I still have the original skybox switch project that you forked from in the thread.

So I can delete my fork of your fork that has your car interior skybox and still have the reference code other people

Ok in that case it makes sense :slight_smile:

1 Like