Load local app GLTF/GLB mesh in Babylon React Native?

@bghgary What is the trick to bundling and deploying meshes with your app, then loading those meshes (say GLTF/GLB) across mobile platforms?

I see the Babylon React Native playground app code is loading externally referenced meshes but that’s not an option in our use case. We need to bundle all assets, including meshes, into the app.

I’ve only had success with .babylon files, renaming to .json and importing all using the import statement (rather than loading only the meshes required, when required). I’d rather use GLB if I can.

There is this thread :

It helped me bundle glb and other resources in this project:

Code for loading glb can be found here:

Note some exception regarding .env files for example:

Where extension must be provided to be properly loaded.


Thanks @Cedric ! That’s a great help :sunglasses:


Hi @Cedric

I’ve been able to use this technique to load bundled app textures but I haven’t had any success yet with GLB meshes. I keep getting the error below. I’m importing @babylonjs/loaders/glTF and have added glb to my metro config. Any ideas?

[RuntimeError: Unable to load from http://localhost:8081/assets/src/assets/meshes/bloc.glb?platform=android&hash=c1c8d179007750a2518dd2f0ea12744a: Error: Cannot create URL for blob!]

With your browser, can you open this url ?

Yes it loads in browser on the device.

Is your code available somewhere?

Sorry no as it’s an internal project, but I can confirm that I can build and run your SpacePiratesAR just fine.

In my project, local asset PNG textures and JSON files are loading fine as per your code and README. It’s just the GLB files I can’t seem to load. I’ve tried a basic textured cube and the Babylon ufo.glb asset.

Hi, did you add glb extension in metro.config too?

@Cedric I have one small question related, and I don’t want to create new topic only for this

I’m able to load all files, everything seems to work well, but this resolveAssetSource import is ‘red’ whatever I do :frowning: but in the same time the app is working :open_mouth: Thanks

Yes I’ve added it to metro config.

I’m wondering if I need to somehow add the GLTF mime types to my android device, as that’s the only file type I’m having trouble with?

It looks like Android doesn’t have these mime types by default:

You can add a // @ts-ignore comment above that line or create a .d.ts declaration.


I think it has to do with d.ts file. Any idea on how to fix it @RaananW ?

Maybe it is related to the deviced used for testing, … or the model has the right dimensions and position?
For me worked without to touch ‘android’ files

Yeah after posting I realised it makes no sense, as @Cedric 's project builds and runs fine on the same device and that has no trouble with GLBs.

I also tried substituting Cedric’s GLBs into my project but they also don’t work in my project, so it’s something specific to my project structure or config.

Only other thought that comes to mind is maybe the order or timing of the import "@babylonjs/loaders/glTF"; is important? My project structure is quite deep and maybe the GLTF loader isn’t being found or used or something?

Stupid question maybe but did you open the .apk to check that .glb is inside? Also is it a debug build?

It’s a debug build. I checked the apk but there’s no glb, however there’s also none of the image or json assets (at least by those names) in there either that I can find, yet they are working.

You need to add the @types/react-native package if you want the types to work.

npm install -D @types/react-native should do the job


node v14.16.0
npm v6.14.11
Still red :frowning:
I’ll add an ignore for now

Can you try restarting your typescript-server? There is no reason for it to fail, unless it is not officially exported from this path (i.e. - not exported in the type-file).