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!
What I’m talking about its this:
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!
So, does something like this 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.
I undestand, but I will create it anyway, Im doing it right now btw!
Is there a place that I can share it for other babylon users? Not sure if it fits on demos and projects
sure, that would probably be the right place for this
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.
const player = await SceneLoader.ImportMeshAsync(‘’, ‘./’, ‘Player.babylon’, scene);
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
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
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).
Yeah its a mess, but I’m about to finish it, as soon as I finish its v1 I share it!