Not able to Load .glb from firebase storage but works with s3 on AWS

Questions
1

Hello guys,
I am trying to load .glb file from Firebase storage and getting this issue below

image

not sure what happening …coz the same model stored on s3 AWS work fine .

this is how my simple code look like not sure whats the issue

  const THREE_PATH = `https://unpkg.com/three@0.${THREE.REVISION}.x`;
    const DRACO_LOADER = new DRACOLoader(this.manager_).setDecoderPath(
      `${THREE_PATH}/examples/jsm/libs/draco/gltf/`
    );
    
    const loader = new GLTFLoader(this.manager_).setDRACOLoader(DRACO_LOADER);
    const fromS3 =
      'https://nirakar.s3.ap-south-1.amazonaws.com/default/shaderBall.glb';

    const fromFireBase =
      'https://firebasestorage.googleapis.com/v0/b/nirakar-4d149.appspot.com/o/default%2FshaderBall%2FshaderBall.glb';

  const fromFireBaseFull =
      'https://firebasestorage.googleapis.com/v0/b/nirakar-4d149.appspot.com/o/default%2FshaderBall%2FshaderBall.glb?alt=media&token=914a635d-f2f2-46b9-b0bb-8601e13398f1';


    loader.load(
      fromFireBase,
      (gltf) => {
        console.log(gltf);
      },
      function (xhr: any) {
        console.log(xhr);
      },
      function (err: any) {
        console.log(err);
      }
    );

this is what the models look like

image
image932×815 34.4 KB

1 Like
2

Turn out it was a CORS error after all … it’s fixed using gsutil

for those who got stuck here, use the link below to read and set your CORS

https://firebase.google.com/docs/storage/web/download-files#web-version-9

1 Like
3

(8) fix cors error in angular, react, ionic , web apps - firebase storage | google cloud storage - YouTube This video will be help u setup CORS.