Having issues with creating a new Skybox

Questions
1

Hey there,

As the title says, I’m having some difficulties adding my own sky box. When I use the provided skybox it works fine. But when I try to import my own files from 3D Space it doesn’t seem to work. I download the 6 pictures and rename as per the skybox3 example.

Screenshot 2024-05-13 at 20.39.59
Screenshot 2024-05-13 at 20.39.59708×624 41.8 KB

This works:

private createSkybox() {
    // Specify the size of the skybox
    const skyboxSize = 5000; // The size of the skybox
    const skybox = MeshBuilder.CreateBox("skybox", { size: skyboxSize }, this.scene);
    const skyboxMaterial = new StandardMaterial("skyboxMaterial", this.scene);
    
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new CubeTexture("textures/skybox/skybox3", this.scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
    skyboxMaterial.disableLighting = true;
    
    skybox.material = skyboxMaterial;
    skybox.infiniteDistance = false; // Ensures the skybox moves with the camera
}

This doesn’t work:


private createSkybox() {
    // Specify the size of the skybox
    const skyboxSize = 5000; // The size of the skybox
    const skybox = MeshBuilder.CreateBox("skybox", { size: skyboxSize }, this.scene);
    const skyboxMaterial = new StandardMaterial("skyboxMaterial", this.scene);
    
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new CubeTexture("textures/space/space", this.scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
    skyboxMaterial.disableLighting = true;
    
    skybox.material = skyboxMaterial;
    skybox.infiniteDistance = false; // Ensures the skybox moves with the camera
}

Also I noticed the skybox size doesn’t seem to to change anything even if skybox.infiniteDistance = false; is set to true.

Can someone explain what I’m doing wrong here? Thanks in advance :slight_smile:

2

at first glance this looks perfectly correct :slight_smile:

Can you share a repro somewhere?

3

If the file is in png file format, would you like to do the following?

let skyBoxLink = “textures/skybox/space”;
let frontTextureExt = “_pz.png”;
let backTextureExt = “_nz.png”;
let leftTextureExt = “_px.png”;
let rightTextureExt = “_nx.png”;
let upTextureExt = “_py.png”;
let downTextureExt = “_ny.png”;

let extensions = [leftTextureExt, upTextureExt, frontTextureExt, rightTextureExt, downTextureExt, backTextureExt];

skyboxMaterial.reflectionTexture = new CubeTexture(skyBoxLink, scene, extensions, false);
skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;

1 Like
4

Sure, here is the repo:

5

Thanks, I will try this later today and see if it works!

6

@RaananW do you have a few cycles available to help on this one ?

7

This actually worked, thank you! :slight_smile:

Even though I’m not liking the skybox created… I’m working on the environment of my project and man, I’m not good at this stuff :smiley: If anyone has some good examples of creating a space like environment I’d appreciate it!

1 Like
8

Seems to be technically solved by @11128

Now it’s a matter of making things pretty! And you don’t want me to help with that :wink:

What I can say is that there are many skybox generators, and a lot of AI generators that can generate skyboxes (like the amazing Blockade Labs | 360° panorama generator)

2 Likes
9

Yes, it works just fine but I need to work on it for sure.

Thanks for the suggestion, I’m loving Blockade Labs!

1 Like