GLTF file fails to load with file:// error even though filenames match – case sensitivity issue?

Questions
1

:memo: Body:

Hi Babylon.js team :waving_hand:

I’m building a web-based React + Babylon.js app where users upload .gltf models along with their external resources like .bin and .png files.

I use the following setup:

ts

selectedFiles.forEach(file => {
  FilesInputStore.FilesToLoad[file.name] = file;
});

SceneLoader.ImportMeshAsync(
  null,
  'file:',
  gltfFile,
  scene,
  null,
  '.gltf'
);

All the uploaded filenames exactly match what’s referenced inside the .gltf file — except for case sensitivity.
For example:

  • The .gltf refers to "uri": "textura.png"
  • The uploaded file is named TEXTURA.png

Despite this, I get errors like:

pgsql

Not allowed to load local resource: file://textura.png

Even though "textura.png" is present in FilesToLoad with original case (TEXTURA.png), Babylon seems not to find it unless the casing is identical.

:red_question_mark:Questions:

  1. Is Babylon’s URI resolution for FilesToLoad case-sensitive?
  2. Is there any way to hook or override the lookup logic so it can be case-insensitive?
  3. Would you recommend modifying the .gltf "uri" fields programmatically before loading?
  4. Are there any official utilities or community tools for handling .gltf file + resource uploads robustly in the browser?

Any help would be greatly appreciated :folded_hands:

2

As for the point 4, the Sandbox https://sandbox.babylonjs.com/ is a good example of loading different file types. It is built with React, the source is here Babylon.js/packages/tools/sandbox at master · BabylonJS/Babylon.js · GitHub

3

Hey @deet_dev! FilesInputStore.FilesToLoad is designed to be a cache where the file names are always stored in lowercase, so if you change your code to this:

selectedFiles.forEach(file => {
  FilesInputStore.FilesToLoad[file.name.toLowerCase()] = file;
});

Then it should work correctly. I will work on updating our docs to make this clearer.

Unrelated to your question, SceneLoader is deprecated, so I would recommend you use instead the BABYLON.ImportMeshAsync function instead, you can read the docs here:

ImportMeshAsync | Babylon.js Documentation

And here is a playground:

ImportMeshAsync Example | Babylon.js Playground

Hope it helps!

4

Thanks you very much your reply

I’m happy because of your help.

1 Like