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:
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.
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
- get the files from HTML-Input (works fine)
- with url = URL.createObjectURL() creating a blob for the glTF File
- 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 )
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.