How to import a local .glb file in BabylonReactNative?

Could someone provide an example of how to import local files? There isn’t much documentation on the BabylonjsReactNative project yet.

Thanks!

1 Like

Welcome aboard!

Adding @bghgary.

Sorry for the lack of documentation. The easiest way to load a local file is to use the app: uri scheme. Underneath, this will use platform APIs to access resources in the app package.

Examples
Android: AAssetManager
Apple: [[NSBundle mainBundle] pathForResource:url.path ofType:nil]
UWP: ApplicationModel::Package::Current().InstalledLocation().GetFileAsync

You can use this uri scheme with any of the Babylon.js APIs that take urls (e.g. SceneLoader.Append to load a glb).

Thanks @bghgary. Sorry I’m not quite following, any documentation I can find on React Native’s app: uri scheme seems to be related to deep linking into the app from the web or other apps. Can you share an example of how this would work?

Oops, sorry, I gave you instructions for Babylon Native. :grimacing: Babylon React Native doesn’t work any different than normal React Native for resources. Maybe @ryantrem can help with this?

Loading glbs locally is not well supported yet. We need more work here. importing a .glb file fails if only local path is provided and not served through HTTP · Issue #165 · BabylonJS/BabylonReactNative · GitHub

@ryantrem Even though it’s not well supported, is there a method to get it working locally on iOS in release mode regardless? Even a hacky workaround would be great as I’m just trying to verify the performance of my scene in a release environment.

We did spend some time trying out different ideas for this but none of them panned out, so I think it just needs more investigation, ideally from someone who deeply understands how packaged assets work in Android/iOS/RN. It’s frustrating that this is such a pain since it is obviously basic functionality that folks using Babylon React Native would expect. :frowning:

If you just want a quick workaround to test a scene, you could do the following:

  1. Convert your glb to a base64 string. I like to use PowerShell for this:
[System.Convert]::ToBase64String([System.IO.File]::ReadAllBytes("/path/to/your/model.glb"))
  1. Paste the base64 string into a model.json file in your project that looks something like this (where Z2xURgIAAAA...AA== is a placeholder for the base64 string you got from step 1):
{
    "data": "Z2xURgIAAAA...AA=="
}
  1. Load the model from the base 64 string like this:
import * as model from "model.json";
...
SceneLoader.ImportMeshAsync("", "", `data:base64,${model.data}`, scene);

This is not an efficient way of storing/loading models, but for testing purposes or for small models/assets it should be ok.

1 Like