Unable to load glb file from IPFS URL

Hello everyone!

I am trying to load an online 3D model from IPFS but got this error:

  WARN  BJS - [14:39:10]: Unable to find a plugin to load .io/ipfs/qmpute6bhebuvsccwj5m5gpcqb8up3v5am5ahzzx3jnt76 files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf) see: https://doc.babylonjs.com/how_to/load_from_any_file_type 
EngineScreen
RCTView
View
SafeAreaView@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:82969:41
App
RCTView
View
RCTView
View
AppContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:78624:36
BabylonReactNativeSample(RootComponent)@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:84906:28
 WARN  Possible Unhandled Promise Rejection (id: 6):
RuntimeError: Unable to load from https://ipfs.io/ipfs/QmPute6BHeBUVsccWJ5m5gPcqB8Up3v5am5ahZZX3jNT76?filename=shiba.glb: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse
BaseError@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:115742:45
RuntimeError@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:115769:30
errorHandler@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:161330:109
load@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:287553:18
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:161362:33
dataCallback@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:160946:18
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:114882:16
onReadyStateChange@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:115006:28
 WARN  Possible Unhandled Promise Rejection (id: 7):
RuntimeError: Unable to load from https://ipfs.io/ipfs/QmPute6BHeBUVsccWJ5m5gPcqB8Up3v5am5ahZZX3jNT76?filename=shiba.glb: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse
BaseError@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:115742:45
RuntimeError@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:115769:30
errorHandler@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:161330:109
load@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:287553:18
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:161362:33
dataCallback@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:160946:18
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:114882:16
onReadyStateChange@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.babylonreactnativesample&modulesOnly=false&runModule=true:115006:28

Steps to produce:

  1. Clone the sample repo
  2. Checkout branch 0.69 and downgrade the Babylon libs to 5.17.0
  3. The original code works fine when load file from https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb but when I change the url to an IPFS url https://ipfs.io/ipfs/QmPute6BHeBUVsccWJ5m5gPcqB8Up3v5am5ahZZX3jNT76?filename=shiba.glb , it gives the error above.
  useEffect(() => {
    if (engine) {
      const url =
        'https://ipfs.io/ipfs/QmPute6BHeBUVsccWJ5m5gPcqB8Up3v5am5ahZZX3jNT76?filename=shiba.glb';
      SceneLoader.LoadAsync(url, undefined, engine).then(loadScene => {
        setScene(loadScene);
        loadScene.createDefaultCameraOrLight(true, undefined, true);
        (loadScene.activeCamera as ArcRotateCamera).alpha += Math.PI;
        (loadScene.activeCamera as ArcRotateCamera).radius = 10;
        setCamera(loadScene.activeCamera!);
      });
    }
  }, [engine]);

That’s because the URL parser doesn’t try parsing the extension from query parameters, only from the URL. this was a butg and was fixed a few versions ago.

You will need to provide the extension yourself. It is one of the last parameters on the Load or Import function, depending on the function you are using. You will need to provide “.glb” as the extension in order for the file to be loaded correctly

1 Like