Unable to import .glb model locally using webpack ecosystem

[Shadowalker]

Hi everybody! I have struggled a lot with webpack today and haven’t figured out how to solve my problem.

Stack: React + Babylon, Webpack as a bundler.

I want to import a mesh to my scene using ImportMeshAsync function, but it doesn’t work properly. In fact it generates an error (if I am using debugLayer) or just ignores me.

The lines below causes an error (I can see the error only if I toggle on the debugLayer);

import "@babylonjs/loaders/glTF";
import cubeMesh from '../../../assets/models/cube.glb';
...
const _squaredWalls = await SceneLoader.ImportMeshAsync('', '', cubeMesh, scene, undefined, '.glb');

Also here is a video of the scene where I show the problem with the material: BabylonJS: ImportMeshAsync function trouble.

The line below works, but I really do want to use gltf-loader and webpack ecosystem.

const _squaredWalls = await SceneLoader.ImportMeshAsync('', './models/', 'cube.glb', scene);

You can see that model was loaded using both approaches but using the gltf-loader variant it seems that it doesn’t have any materials.

Here is the webpack config: (github)

Here is the Reactjs scene (was pretty much copied from doc): (github)

P.S. I believe, this is my First day on the forums in the whole internet so you can congrats me with that atleast!

[sebavan]

Welcome to the forum !!!

Let me add @RaananW our all build thinggies guru

[carolhmj]

I’m not the build guru but you might want to check the guru’s example webpack config: babylonjs-webpack-es6/webpack.common.js at master · RaananW/babylonjs-webpack-es6 (github.com) as it’s super useful reference

[Shadowalker]

Yes, I already have checked his webpack config about two days ago and this is almost the same as mine webpack-config.

[labris]

If you will try to install and run your Github example you’ll have other errors which may give some clue to the problem.

[Shadowalker]

I think you mean that my current repository can’t be easily deployed locally. That’s because I also have a backend integration plus files like .env.

I can fix that if that would help you to help me .

[labris]

Well, this line should work as it works here - https://github.com/RaananW/babylonjs-webpack-es6/blob/master/src/scenes/loadModelAndEnv.ts#L67 . So I believe it could be related to some webpack settings.

const _squaredWalls = await SceneLoader.ImportMeshAsync('', '', cubeMesh, scene, undefined, '.glb');

@Shadowalker

I can fix that if that would help you to help me .

I cannot promise, I am not webpack expert, but I believe that it really could help others to help you

[Shadowalker]

Okay, I will fix that.

Also, here is the video on which you can see trouble with materials of the imported through gltf-loader model. Maybe this is important info.

[Shadowalker]

Now the repository is detached from .env and backend and the project can be easily installed.

npm i
npm run start

https://github.com/LordLovelysmell/interior-constructor-frontend

[RaananW]

So!

You are using the url loader, which converts certain files to base64, depending on their size (or your configuration). it’ll be much better to not use base64 and have webpack generate a real URL.

do that by setting the limit to false in the webpack config.

Now you are going to get a URL. But it is not a valid path (according to our loader :-)), bcause it starts with “/”. add a “.” before the file URL, and use the window.location.href as a server address and you are good to go:

 const _squaredWalls = await SceneLoader.ImportMeshAsync('', window.location.href, "." + cubeMesh, scene, undefined, '.glb');

of course that should depend on your use case and configuration, but now you have a working example.

[Shadowalker]

Thank you . With a little of jumping around I have managed to apply your fix suggestion.

 const _squaredWalls = await SceneLoader.ImportMeshAsync('', '', '.' + cubeMesh, scene, undefined, '.glb');

Above is working example, but I still don’t exactly understand WHY base64 does not work, and WHY your own webpack-config is managing the base64 quite well.

Could you please explain it somehow?

[RaananW]

oh, base64 did work, but there was some weird issue with the texture. TBH - I haven’t debugged it. I can find the time later today or tomorrow to check

[Shadowalker]

I would highly appreciate it if you look at the code later. The bugged code is at the branch named import-mesh-async-error, but I made it default branch in repository so you can just clone the repo.

Thank you in advance.

[RaananW]

your problem is more of a react-issue.

You are initializing the scene (and engine) twice. and you load the model twice. the difference between base64 and a URL is that the URL is loaded async, whilc base64 is synchronous. And since the engine and scene is not yet ready loading the model does not work as expected. If you only load in the 2nd scene (not the best solution):

Check why your scene initializes twice. Feels like something is wrong with the Route (as it renders the dashboard a few times), but i’ll leave it to you to fix that part in the project