solved Trouble loading assets using Webpack

[wildbluezonder]

Hi!

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!!

https://github.com/wellstsai/pro-2

[Sebavan]

I tried your project and it worked directly for me ??? Did you already fix it ?

[wildbluezonder]

@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.

[Sebavan]

Thx I ll take a look

[Sebavan]

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

[wildbluezonder]

awesome, thanks!! Very much appreciated.

heh, yeah i was renaming some stuff and figured the faces were wrong.