Let User upload gltf file with references to bin file and textures

Questions
, ,
1

Hello,

I encountered a problem while developing a react-three-fiber website.

What I want to do: I want to let the user upload a GLTF file, the corresponding .bin file and the textures all without server interaction, and display it directly. It works if only one glTF file is uploaded without a .bin file or textures, but not if there are more files. I get the files from the HTML-Input and it works until the GLTFLoader references the bin file over the “buffers/uri”-key.

I had two ideas for solving this:

  1. change the path in the “buffers/uri” key of the glTF to a specific blob of the bin file
    → Problem: To change the glTF JSON in run-time I need to load it with the GLTFLoader first, but therefore it throws an error, before being able to modify anything.

  2. load the bin file with the same fake-url as the glTF object
    → could not find an appropriate bin loader that allows me to specify the fake-url from the glTF object to it

My steps:

  1. get the files from HTML-Input (works fine)
  2. with url = URL.createObjectURL() creating a blob for the glTF File
  3. const scene = useLoader(GLTFLoader, url) to load the glTF Object (works fine if no bin or textures, but throws error otherwise as it states that the bin file is not found at localhost/scene.bin )

My questions:
I understand the problem, but could not find a solution. Is there any way to load the bin file in the same directory as the glTF file or change the glTF content before loading it? Maybe there is a specific loader that I am missing?

I would appreciate any help. Thanks.

1 Like