2

I have a problem with a texture of a skybox made in webgl using babylonjs. My whole project is on the webserver and everything seemd to be good written but the box which should be a skybox doesn't show the texture - black outside and inside

code:

var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
Diego C Nascimento
  • 2,801
  • 1
  • 17
  • 23
user3166894
  • 21
  • 1
  • 2
  • I have experienced a similar issue when using .png images. My hope is to use basis images but I think if .png isn't supported basis probably isn't either. Such a shame. – Školstvo Jun 04 '20 at 18:11
  • Yep only .jpg images are supported, what a shame. `if (!isEnv && !isDDS && !extensions) { extensions = ["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"]; }` – Školstvo Jun 04 '20 at 18:18

4 Answers4

2

I suspect your directory structure on disk is not correct for the skybox.

If you follow the babylon playground example for a skybox http://www.babylonjs-playground.com/#3458P (and then download the zip for the complete working example)

You can see that in your case "skybox/skybox" means a directory called "skybox" containing 6 skybox files i.e.

  • "skybox" directory containing files named
    • skybox_nx.jpg
    • skybox_px.jpg
    • skybox_ny.jpg
    • skybox_py.jpg
    • skybox_nz.jpg
    • skybox_pz.jpg
macavalon
  • 21
  • 3
1

First check your fog, it will not let you see the skybox, try to remove it. In my case was: I copied the code, and it was too big for my scene, I didn't notice the change. then I decrease the 

    var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);

to 

    var skybox = BABYLON.Mesh.CreateBox("skyBox", 52.5, scene);

and problem solved

Amir Mehrnam
  • 346
  • 5
  • 5
0

The code seems right. Could you check with F12 bar if the textures are correctly loaded?

David Catuhe
  • 1,747
  • 1
  • 10
  • 9
0

I had the same problem. Simply add a free camera to solve this:

var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 5), scene);
scene.activeCamera = freeCamera;

You should see your skybox. Thanks

jpbalarini
  • 1,082
  • 1
  • 17
  • 23