How to import a local .glb file in BabylonReactNative?

swese44 · February 6, 2021, 7:41pm

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

Thanks!

Evgeni_Popov · February 8, 2021, 10:19am

Welcome aboard!

Adding @bghgary.

bghgary · February 9, 2021, 5:06pm

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).

swese44 · March 1, 2021, 12:09am

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?

bghgary · March 1, 2021, 6:30pm

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

ryantrem · March 1, 2021, 7:17pm

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

ninjz · May 25, 2021, 12:36pm

@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.

ryantrem · May 26, 2021, 3:53pm

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.

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

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"))

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=="
}

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.

dlew00 · October 13, 2021, 6:35pm

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?

sebavan · October 13, 2021, 6:52pm

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 ?

dlew00 · October 13, 2021, 8:07pm

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

dlew00 · October 13, 2021, 9:39pm

@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!

bghgary · October 13, 2021, 10:51pm

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:

github.com

BabylonJS/BabylonReactNative/blob/master/Apps/Playground/App.tsx#L75

    
      
          
          
    const transformContainer = new TransformNode('Transform Container', scene);
              transformContainer.parent = rootNode;
              transformContainer.scaling.scaleInPlace(0.2);
              transformContainer.position.y -= .2;
          
          
    scene.beforeRender = function () {
                transformContainer.rotate(Vector3.Up(), 0.005 * scene.getAnimationRatio());
              };
          
          
    SceneLoader.ImportMeshAsync('', 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb').then(result => {
                const mesh = result.meshes[0];
                mesh.parent = transformContainer;
              });
            }
          }, [engine]);
          
          
useEffect(() => {
            if (rootNode) {
              rootNode.scaling = new Vector3(scale, scale, scale);
            }

dlew00 · October 13, 2021, 11:01pm

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

Alexis_Battista · December 24, 2023, 8:14pm

I’ve been trying for 3 days, but I can’t load glb files madly in react native… any solution to this?

Evgeni_Popov · December 24, 2023, 8:40pm

cc @BabylonNative, but please be patient as people are currently on Christmas break.

jeremy-coleman · December 25, 2023, 10:37pm

Does anyone know how mac and android behave when using localhost http / loopback? Windows skips the network stack all together so even tho it may seem inefficient its really not at least on windows

ryantrem · December 26, 2023, 6:40am

I believe a few people have had success using Expo Asset. If you search the forum for “expo asset” I believe you should find some examples, though I haven’t verified them myself.

Cedric · January 8, 2024, 10:03am

There is this GitHub issue with a bunch of solutions : importing a .glb file fails if only local path is provided and not served through HTTP · Issue #165 · BabylonJS/BabylonReactNative · GitHub

I didn’t test any, yet. It’s been on my radar for a very long time. I’ll try to make it more urgent.

Topic		Replies	Views
How to load a local glb in babylon-native on iOS Questions react , glb , load , babylon-native , ios	5	684	November 15, 2022
BabylonReactNative for Windows cannot open .glb files in local path Bugs glb , babylon-native , react-native	2	346	September 18, 2023
Load local app GLTF/GLB mesh in Babylon React Native? Questions babylon-native	25	3817	January 3, 2023
How to load local glb files into Babylon Native Questions babylon-native	4	778	March 7, 2024
Render model with root url as a file system path (React native) Questions	2	369	August 9, 2023

How to import a local .glb file in BabylonReactNative?

Related topics