Using CubeTexture with webpack

Questions
1

I’m currently working on adding a skybox to a scene of mine. I have my skybox split into 6 separate .png images at a location in my project. From my understanding, CubeTexture requires a string (url) to the location where all these 6 images are located. This is fine normally, except I am using webpack to build my project, and as such the names of the images do not correspond with the names used by Babylon at runtime to load these images.

Doing something like this does not quite work:

skyboxMaterial.reflectionTexture = new CubeTexture(
      "assets/textures/skybox/redplanet",
      scene,
      ["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"],
);

When running the code I can see that requests are being made to the 6 URLs for the 6 faces of the cube. Of course, Webpack’s url-loader has given my assets hashes as filenames instead. Normally, when using Webpack I would import an image directly in my JS/TS module, and then use the imported value in my code. This allows webpack to figure out the correct URL to use at build time. However this only works for individual image files (to my understanding), while CubeTexture requires the location where these images are found.

To summarize, my question would be. is there a convenient solution where I can either: give CubeTexture a list of images to use (this way I can use the “normal” way of importing images when using webpack)? If that is not possible, can I work around this issue in some other way?

Finally, if nothing else works (last resort), is there a different babylon API that I can use to create a skybox which lets me circumvent CubeTexture entirely - assuming I can use the same image data.

2

Hi! And welcome to the forum :slight_smile:

The array you provide (["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"]) is an array of the extensions of the 6 different elements of a cube texture. This extension is added to the root URL (the first parameter in the constructor). What you can do is import all 6 files using webpack (and thus getting 6 strings), and providing them in the array, while setting the root url to an empty string. This way Babylon will take the URLs generated by webpack.

3

Hi, and thanks! Enjoying the framework so far. :smiley:

This solved my issue, thank you for the help!

1 Like