Can't seem to use local files/assets

Hello all,

Firstly apologies in advance for potentially dumb questions. I have rudimentary java (python, swift, matlab) coding experience as my background is engineering in particular CAD modelling and aerodynamics. I’d like to learn Babylon.js to help provide 3D assets for our companies website and I am struggling at the beginning of my journey to get going.

I’ve have managed to create a number of textured 3D models in Blender and can export these as .babylon files using the exporter provided on the website. These then load fine in the sandbox hosted on the babylonjs.com website. However, I am struggling with the next stage of hosting these on a (local) web-page.

If I use the boiler-plate code from the tutorials (shown below) it all works fine, i.e. it loads the simple cube.

BABYLON.SceneLoader.ImportMeshAsync("", “https://assets.babylonjs.com/meshes/”, “box.babylon”);

However, I cant seem to modify this to load local files. I’ve tried a number of things such as replacing the “https…” path with a “c:…” path, or omitting this completely and making sure the . html file is in the same local folder and the .babylon file and texture assets.

Thinking it might be the model itself I have then just recreated the simple box from the earlier tutorial and exported it using the insector but equally this doesn’t work either.

The local webpage (using chrome) doesn’t throw any areas or anything but all I see is a dark blue background with no model.

I’m normally quite happy to poke around and learn by trial and error but I can’t even get past this first hurdle.

Look forward to hearing your thoughts.

Thanks,
Sy

Hello and welcome!

First of all, could you check browser console (press F12 for Chrome/PC) for errors?
Please note, that JavaScript does not have direct access to the local files due to security and privacy. So if you would like to run your example on your PC, you’ll need some localhost server like Express.js or (which may be simpler to install) WAMP or you may try to turn on Windows localhost.

My favorite for just testing stuff out locally is serve - npm. You just npm globally install it and serve <directory> and it will expose any of the files at http://localhost:3000

1 Like

Thankyou so much for all of your help. In the end I went the serve - npm route. Whilst I couldn’t seem to get this installed globally the npx serve command worked well for me. I’ve now managed to load both the tutorial .babylon file and also my own .babylon scene with textures exported from Blender.

In terms of the SceneLoader command I still cant get this to work by specifying a “http://localhost” path but if I leave this undeclared as “” and keep my assets in the same route as the .html page it all seems to load properly.

Very satisfying when your first model appears! Thanks again for all of your help and Im sure Ill pop up again shortly with more questions!

Thanks,
Sy