NPM webpack relative import

Questions
1

Is there something like a “webpack loader” to load .babylon files relative instead of import from the absolute path while using CRA/NextJs/Vue and so on?

What I want to reach with this is separate the meshes used on the scene by “component” just like we separate components with some UI frameworks or when use DDD.

To make me more clear, lets suppose I have 2 scenes, scene 1 and 2. I want to have a folder named scenes, inside this scenes folder I want 2 another folders scene-1 and scene-2, inside each scene folder I would like to create another folder named meshes and there store all the meshes of the current scene.

Something like this:

src/
--| scenes/
----| scene-1/
------| index.tsx
------| meshes/
--------| mesh-1.babylon
--------| mesh-2.babylon
----| scene-2/
------| index.tsx
------| meshes/
--------| mesh-1.babylon
--------| mesh-2.babylon

I want this just because I like this kind of file organization and I wanted to know if its possible and how can I do something like this

*The index.tsx files would have something like this inside it: SceneLoader.ImportMeshAsync("mesh-name", './meshes/', "mesh-1.babylon", scene) but I know that webpack loaders don’t work exactly like this, maybe I should import it like a NPM module what isn’t a issue at all if its possible.

2

file-loader will copy them, url-loader will inline as data uri , raw-loader will import them as strings, and json-loader will load as json. Maybe just copying them is actually easiest. Or even, just put them in public/meshes and that’ll work too

3

There is an example here - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely. (github.com) of how to load a gltf. the same would work for .babylon with minor adjustments.

The source is this - babylonjs-webpack-es6/loadModelAndEnv.ts at master · RaananW/babylonjs-webpack-es6 (github.com) , but there are a few changes in the webpack configuration to get that to work.

1 Like