Jump to content

Trouble loading assets using Webpack


Recommended Posts


I am having trouble with loading assets when for example loading a skybox. I've been struggling for much longer than i'd like with this and would appreciate some help!

When my code hits this line:

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture('assets/skybox/TropicalSunnyDay/TropicalSunnyDay', scene);

I get this error in console (throws error for each skybox face but i just copied for one face since they're all the same error)

GET http://localhost:8080/assets/skybox/TropicalSunnyDay/TropicalSunnyDay_px.jpg 404 (Not Found)
BJS - [16:52:03]: Error while trying to load image: assets/skybox/TropicalSunnyDay/TropicalSunnyDay_px.jpg


I'm kind of lost on what the problem is but my hunch is that it might be a webpack issue where I'm not correctly setting things up? It's also worth noting I don't have my actual server set up so I'm using webpack devserver.

This is my webpack config for `output` and `devServer`

output: {
  path: path.resolve(__dirname, '../dist'),
  filename: 'bundle.js',
devServer: {
  hot: true,
  compress: true,
  contentBase: '/dist',

for command line i run "webpack-dev-server --mode=development --config=webpack/webpack.dev.js"

webpack logs out:

ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /dist


linked the github as I might be missing something but let me know if any more info is needed. Any help appreciated!!


Link to comment
Share on other sites

@Sebavan thanks for trying it! I haven't fixed my error yet.

According to my understanding there are at least 2 ways to create a skybox. For the code you pulled down, I had commented out the code causing errors and was using the alternative skybox approach I had read here https://doc.babylonjs.com/extensions/sky. Unfortunately, that method doesn't seem to allow me to import a custom sky image(s). For my project, having a custom sky is essential so this method won't work for me.

My apologies, I didn't realize that I had commented out the code in the latest version! I have updated the repo to be able to reproduce the error I was stating above.

Link to comment
Share on other sites

This is because your texture are png instead of jpg.

So you could force the extensions in the 3rf param of the cube texture: 

new BABYLON.CubeTexture('assets/skybox/TropicalSunnyDay/TropicalSunnyDay', scene, ["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"]);
But by doing so your texture need to be named accurately for the faces. Please look at this folder for reference: https://github.com/BabylonJS/Website/tree/master/Assets/skybox
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...