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

1 Like

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.

1 Like

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

3 Likes

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

2 Likes

hi do you know how to load texture? i tried so many paths but no one works.

What is your use case ? how is your app served and/or bundled ? as long as files are available through web protocols it should work.

1 Like

ok, my fault, and I find out how to load my local images.
But a new question, is it possible to use babylon without network? Or only if I download all the .js file needed can I edit and view babylon scene offline?
sorry for asking you questions, but I really do not find answers in my 2hour google searching.

Babylon is like any other JS libraries, you only need network to load the files so if you have all of them available through a local server it is all good. You can also rely on service workers to keep them in cache once they have been fetched from the servers.

1 Like

thanks for your patient! and i found some ways in google, let me figure it out!
and sorry Im not a native english speaker.