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)
preSkyBox.unload();
// set skyBox
preSkyBox = this.skyboxs[index];
this.setSkyBox(preSkyBox);
};
// load and set skybox
ChangeCubemap.prototype.setSkyBox = function(skyBox) {
if (!skyBox) {
console.warn("Skybox asset is null.");
this.app.setSkybox(null);
} else if (skyBox.resource) {
console.warn("Skybox is already loaded, no need to load again.");
this.app.setSkybox(skyBox.resource);
} else {
console.log("Loading skybox...");
skyBox.ready(function(asset) {
console.log("Skybox loaded.");
this.app.scene.skyboxMip = 1;
this.app.scene.skyboxIntensity = 1;
this.app.setSkybox(asset.resource);
}, this);
}
};
or:
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];
app.assets.load(_cubemap);
_cubemap.ready(function () {
//app.scene.skybox = _cubemap.resource; // Set the skybox resource
app.scene.setSkybox(_cubemap.resources)
app.scene.skyboxMip = 0;
app.scene.skyboxIntensity = 1;
});
};
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?
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.
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.
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.
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).
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 )
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 ?
)