I’m about to create a way to import meshes from our local folder, instead of a glob mesh folder, but I just want to ensure that I’m not building something that’s already knewed by the community!
Inside Player.ts I would have something like this: const player = await SceneLoader.ImportMeshAsync('', './', 'Player.babylon', scene);
I’m used to work like this and IMO is better for organization, but I didn’t found anything that does the trick working with webpack so I’m about to create it (despite the fact I never done something like this from scratch), but before start it, I just want to make sure that I’m not building something that already exists!
Not that I’m aware of Through I’ve never tried, .babylon files are just JSONs, so wouldn’t a default webpack json loader work? @RaananW knows much more webpack than me through so I’ll defer to his knowledge
There are different ways of solving this using webpack.
Use the Copy Plugin to copy all assets to a static-served directory (i.e. - where the index.html file is).
import model from “./Player.babylon”; at the beginning of the typescript file, and use the returned value as the URL to load (using the URL loader that webpack supports)
Move your assets to a static assets library instead of next to the .ts file
Personally? I like option 3, as it allows you to optimize your deployment. But you can do the same with any of the other options TBH.
No need to reinvent the wheel. Just need to maintain a proper structure.
If you want to use webpack to do this, which i personally dont like, but it does have a couple benefits. For example, if you have a jumble of assets and only want to move the ones you actually use in your app or you want to hash the file names to cache bust.
change:
const player = await SceneLoader.ImportMeshAsync(‘’, ‘./’, ‘Player.babylon’, scene);
to:
let PlayerModelURL = require(“./src/assets/Player.babylon”)
const player = await SceneLoader.ImportMeshAsync(‘’, ‘./’, PlayerModelURL, scene);
then add the .babylon file type to the url-loader’s config. you can also configure how the output is hashed here
PlayerModelURL will be transformed by webpack to the string uri of the output location. you can also configure file-loader to load very small files as an inline data uri , with a size-configurable fallback to the url loader. note that this couples your code to webpack. same with vite, they have a different syntax. conceptually similar to importing css into a javascript file
Hey @jeremy-coleman I tried the import approach at first but I ended up with two issues.
The first issue was that the url was stacking on the main one, leading to this request http://localhost:8080/models/http://localhost:8080/models/brave.babylon
And the other issue was that the textures wasnt being copied to dist folder with the model
ah. yea the external textures would need something… there’s actually already some gltf webpack plugins that will dedupe textures. if i were to approach this, i’d do it as a transform before webpack just using node transform streams or vinyl streams (the gulp stream format). just looking at webpack plugins makes me rage… its like compile.blah.tap.wtf.why.so.long(callback => holy shit ima off myself if theres another nested prop).
Through I’ve never tried, .babylon files are just JSONs, so wouldn’t a default webpack json loader work? 
