Error Loading .gltf Files on Mobile and Web

[stas6100]

I am trying to load an existing scene on both a mobile and a web, but encountered the following errors:

On Mobile:

Unable to find a plugin to load .gltf files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf)

On Web:

RuntimeError: Unable to load from https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF/BoxAnimated.gltf: loadAssets of unknown

I used https://github.com/BabylonJS/BabylonReactNativeSample/blob/main/App.tsx as reference.

Here is the code snippet I’m using:

SceneLoader.LoadAsync('https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF/BoxAnimated.gltf', undefined, engine);

I tried to add loaders as follows:

import '@babylonjs/loaders/glTF';

But that didn’t help. What am I doing wrong?

[gomes42]

This project is just a demonstration. It is not necessarily a boilerplate or template on how you should build an application using Babylon.js.

Unfortunately, I don't use Babylon.js in my daily life anymore, and some things may have changed since this code was written (it's from 2 years ago). The best place for you to look for answers would be on forums or other communities.

Additionally, please note that current versions of various technologies may not work with this codebase anymore. I'd like to help you, but it's really no longer a framework I work with 😔

[stas6100]

Thank you for your response and for the work you’ve done on this project. I understand that you no longer work with Babylon.js regularly. Could you suggest any resources or up-to-date boilerplate code that would be a good starting point for building applications with the Babylon.js? Specifically, we are looking for a solution that can handle both web and mobile platforms.

[dmitryshostak]

@lgxm3z really appreciate your quick response!

[gomes42]

Thank you for your response and for the work you’ve done on this project. I understand that you no longer work with Babylon.js regularly. Could you suggest any resources or up-to-date boilerplate code that would be a good starting point for building applications with the Babylon.js? Specifically, we are looking for a solution that can handle both web and mobile platforms.

When I was experimenting with these technologies, it wasn't common to find public projects using the same codebase for both web and mobile in the React/React Native, Babylon, or ThreeJS communities. Often, I had to use "hacks" or reimplement certain layers depending on the application's complexity. For some technologies, platform-specific differences required rewriting how models are loaded or rendered using different API calls.

I recommend checking out this project to see how to structure a monorepo (with shared packages and code across projects). Start by reproducing your goal on mobile, then on the web, to identify key differences and necessary precautions. Once done, you can run different processes based on the platform.

In this specific project, you can see an example of a component that executes differently depending on the platform. You might need something similar, but with a function that loads the model according to the framework specifications for each platform.

https://github.com/lgxm3z/rotating-cube-demo-babylon-rxn/tree/main/packages/core/src/components/GLRenderer

Remember that you can also look for answers or solutions on the official Babylon.JS forum