GLTFLoader() doesn't load model from remote storage. "Unexpected token � in JSON at position 0"

Hello my friends,
I have creating an application based on REACT, THREE and FIREBASE that creates page with 3d models. Actually I was uploading 3d models on firebase storage and referencing to the THREE.JS loader constructor. But this gives me error that says ‘Unexpected token � in JSON at position 0’

I have also checked the network tab and tried the model reference URL in the browser. It was returning a file that has content-type of models/gltf-json. Heres is the image


I will highly appreciate, if you guys help me. I can also pay for your coffee :stuck_out_tongue: as your time is precious for me.
Please let me know, how can I get rid of this :+1: :+1:

if the gltf is not self contained but refers to other files (bin, textures) then that’s the issue, it will be able to reach the main file but 404 on the links. gltf on the web should best be a draco or meshopt compressed, single glb.

1 Like

Sounds good to me. And yes the gltf files weren’t self-container. Thanks a lot, @drcmda
Can you tell me, what is the reliable process of converting gltf to draco, meshopt ?

i used to do npx gltf-pipeline -i input.gltf -i output.glb --draco.compressionLevel=10 but if you are a react user it’s probably best to use gltfjsx npx gltfjsx input.gltf --transform, this will also give you a re-usable component that makes it very easy to access the scene graph and alter things, --transform uses gltf-transform to dedupe it and compress (including textures).