Cannot load glb files from firebase bucket storage

[nirajmohanrana]

Cannot load glb files from firebase bucket storage

After fetching the glb file from the firebase bucket, it shows this error that

The files are of glTF versions 2.0, then too it shows this error

I have stored an object which also contains link to glb file "product.glbFile"
which axios to fetch the file

I am working on a react js framework

Can someone please help me to solve this issue

I have tried this #3511 but it did not worked for me

[elalish]

Please load the file in our editor, which runs the glTF validator and see if it produces any errors or warnings.

[nirajmohanrana]

Is it problem related to firebase? Is there any other cloud file storage I can use.
(which Cloud Storage is used by model modelviewer.dev?)

[elalish]

modelviewer.dev is a Github Pages site, so everything is served from there. Any cloud storage where you can set CORS headers properly should work, see: https://modelviewer.dev/docs/faq.html#entrydocs-technical-questions-cors

[elalish]

I would guess the problem is in the axios fetching code.

[nirajmohanrana]

I have editted it the CORS Headers in firebase, but it shows same error.
How about I convert the files to dataString and then parse it "src",I tried it locally it runs perfectly fine, is it a Good Idea, what your views?? or is there any drawbacks to it.

[elalish]

That's odd, but if it works, it works. I think you might hit a size limit at some point, but other than that it's fine. You can also pass in an ObjectURL wrapping a Blob.

[nirajmohanrana]

Got the answer for this issue, actually Firebase don't allow to fetch files directly (obviously for security reasons, except native web files like images). To access GLB files we need to change CORS header, which are not just rules that can be changed in Firebase>Rules.

Here is the steps to Change CORS Headers:
Step1: Create cors.json file:
[ { "origin": ["https://your-website.com"], "method": ["GET"], "maxAgeSeconds": 3600 } ]

....here in origin add the url of your site from where request is sent, to accept it from every site add this "origin": ["*"],

Step2: Download GSUTIL from here
You can follow this steps gsutil installation guide

Step3: After intsallation open gCloud command line and run gcloud init and login to your firebase google account.

Step4: cd to the location of cors.json file and run gsutil cors set cors.json gs://BUCKET_NAME
change BUCKET_NAME to your app bucket

Step5: Your CORS Header setting will be chnaged to confirm it run gsutil cors get gs://BUCKET_NAME

Now your are good to go and fetch files as needed, @elalish thanks for your support