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

Would someone be able to please point me to the documentation/examples for if you are trying to load a .glb file (not locally, served via http) as a model into a react native application?

it should be the same code as any JS code I guess ?

await SceneLoader.ImportMeshAsync("", "https://models.babylonjs.com/", "shark.glb", scene);

@bghgary could you confirm ?

2 Likes

Thanks for the quick reply! I’ll give it a try

@sebavan @bghgary I’m still having some issues. Is there a full example with React Native? I get that the code is the same as babylonjs but I assume things like the element tag, the way components link to the scene under the hood, and the createScene function might be slightly different between web and react-native. So if there’s a full example similar to what’s here a babylon js example or exact spots in the github code repo I can look to, that’d be great. Thanks!

If you pull down BabylonReactNative repo, there is a Playground app in the Playground folder that loads a model. This doesn’t use the BabylonReactNative npm package, but it does use the Babylon.js npm packages. Maybe that will help?

This is where the code loads a model:

1 Like

Okay, thank you. I’ll see if I can translate it to what it would be with the react-native npm package.

1 Like