☑ How to change the scene skybox

Help & Support
1

I’m trying to change the skybox of the scene, but it doesn’t seem to be working. I have set an initial skybox from the editor, and I try to change it from this script:

var SkyboxUpdater = pc.createScript('skyboxUpdater');

SkyboxUpdater.attributes.add("cubemap", { type:"asset", assetType:"cubemap" });

// initialize code called once per entity
SkyboxUpdater.prototype.initialize = function()
{
    var div = document.createElement("div");
    var button = document.createElement("button");
    button.style = "position:fixed; top:0px; left:0px; width:100px; height:30px";
    button.innerHTML = "Test";
    button.addEventListener("click", onClick.bind(this));
    div.appendChild(button);
    document.body.appendChild(div);
};



function onClick()
{
    console.log(this.cubemap.resource);
    this.app.scene.skybox = this.cubemap.resource;
}

But the only thing I get is a black background, and the objects’ materials that should be affected by the skybox don’t change their appearance: https://playcanvas.com/project/434733/overview/skybox-test

2 Likes
2

Thanks for sharing simple project that helps to replicate issue - it does really helps.

So the problem here is lack of good documentation and inconsistencies around places.
Looks like we need a new method on pc.Application to simplify setting skybox.

Here is code of onClick method, that sets skybox as supposed to.

if (this.app.scene.skyboxMip === 0) {
    this.cubemap.loadFaces = true;
    this.app.assets.load(this.cubemap);
}

this.app.scene.setSkybox(this.cubemap.resources);

I’ve added an engine ticket for that as well: https://github.com/playcanvas/engine/issues/768

3 Likes
3

Thanks, it works perfectly now. At some point I had tried with loadFaces = true, but didn’t add the app.assets.load() bit.

It needs some improvement on the documentation indeed. A method to set the skybox with one step would be perfect.