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

Cedric · May 31, 2022, 9:14am

There is this thread :

importing a .glb file fails if only local path is provided and not served through HTTP

opened 12:55PM - 01 Mar 21 UTC

enhancement

Hi! First of all, thanks for the great work for all maintainers. I've ju…st started using this library in my project for rendering `.glb` files. When the `.glb` file is served from a local static server, `SceneLoader.ImportMeshAsync` and other similar methods used for importing assets, such as `Append`, `AppendAsync`, etc.. work perfectly. However, when the file is not requested over HTTP, but rather the local path is provided to the above stated methods, the app just crashes without any easily traceable error (I wasn't looking so hard for the error, but it didn't appear in the terminal of the packager). Maybe it's my uneducatedness but from the documentation available [here](https://doc.babylonjs.com/divingDeeper/importers/loadingFileTypes), I expected the import to work with just a local path. I was able to solve the issue by using `expo-asset` to load the `.glb` file instead and provide a local uri, and then passing that local uri to Babylon, described in the below way: ```ts import '@babylonjs/loaders'; import { Asset } from 'expo-asset'; import { SceneLoader, ... } from '@babylonjs/core'; const [{ localUri }] = await Asset.loadAsync( require('/assets/3d/tesla-high.glb') ); const { meshes } = await SceneLoader.ImportMeshAsync( '', localUri as string, '', scene ); ``` However, I'd expect the library to do something similar internally, making the user to be able to only provide a path to a local `.glb` file and it load it without issues. If this work is purposefully left for the user, it would be nice to have it stated in the main documentation, since I think it's quite a common use-case.

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

Code for loading glb can be found here:

github.com

BabylonJS/SpacePiratesAR/blob/4a855844fefdede1205abeec7eb79cf61fdc7fc7/App.tsx#L102

      
        
            var envCube = CubeTexture.CreateFromPrefilteredData(envUri, scene, ".env");
            envCube.name = "environment";
            envCube.gammaSpace = false;
            envCube.rotationY = 1.977;
            scene.environmentTexture = envCube;
            
            
// glow
            const glowLayer = new GlowLayer("glowLayer", scene);
            glowLayer.intensity = 0.5;
            
            
const sceneGLBUri = resolveAssetSource(require('./assets/nativeStaticScene.glb')).uri;
            SceneLoader.AppendAsync("", sceneGLBUri, scene).then(() => {
              const starsGLBUri = resolveAssetSource(require('./assets/starsGeo.glb')).uri;
              SceneLoader.AppendAsync("", starsGLBUri, scene).then(() => {
                const starfield = scene.getMeshByName("starsGeo");
                starfield.scaling = new Vector3(4500, 4500, 4500);
                setStarfield(starfield);
                const starsShader = require('./assets/starfieldShader.json');
                const starsPanoramaUri = resolveAssetSource(require('./assets/starfield_panorama_texture.jpg')).uri;
            
            
    var starsShaderMaterial = new NodeMaterial("starsShader", scene);

Note some exception regarding .env files for example:

github.com

BabylonJS/SpacePiratesAR/blob/4a855844fefdede1205abeec7eb79cf61fdc7fc7/App.tsx#L92

      
        
            const rootNode = new TransformNode('Root Container', scene);
            setRootNode(rootNode);
            
            
// lighting
            const dirLight = new DirectionalLight("dirLight", new Vector3(0.47, 0.0, -0.86), scene);
            dirLight.diffuse = Color3.FromInts(255, 251, 199);
            dirLight.intensity = 3;
            
            
// envirronment
            const envUri = resolveAssetSource(require('./assets/environment.env')).uri;
            var envCube = CubeTexture.CreateFromPrefilteredData(envUri, scene, ".env");
            envCube.name = "environment";
            envCube.gammaSpace = false;
            envCube.rotationY = 1.977;
            scene.environmentTexture = envCube;
            
            
// glow
            const glowLayer = new GlowLayer("glowLayer", scene);
            glowLayer.intensity = 0.5;
            
            
const sceneGLBUri = resolveAssetSource(require('./assets/nativeStaticScene.glb')).uri;

Where extension must be provided to be properly loaded.

Topic		Replies	Views
How to import a local .glb file in BabylonReactNative? Questions react , native	18	3518	January 8, 2024
Using BabylonJS with React Native Questions documentation , react	5	2072	June 20, 2019
How to load a local glb in babylon-native on iOS Questions react , glb , load , babylon-native , ios	5	727	November 15, 2022
Solving issues while loading glb file while using babylon and react Questions gltf , glb , assets	14	4537	September 24, 2022
Loading .gltf file working on the playground, but not on my local setup Questions	2	1098	April 17, 2020

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

Related topics