ColladaLoader access remote files

Question

I access the .dae file through the ColladaLoader of three.js, and use the local .dae file during the development process, which can be read smoothly.

I got an unknown error when I tested accessing .dae files from gitlab online file.

let loaderDae = new ColladaLoader();
   
loaderDae.load(`https://gitlab.com/po_developer/high-precision-3d-graphics-of-traditional-buildings/-/raw/master/95b69c0c-fd25-4bcf-a606-64d6619250a6/untitled.dae`, (dae: any) => {

   console.log('read successfully, something')

}, this.onProgressCallback, this.onErrorCallback)

onProgressCallback(e){
    console.log('onProgressCallback');
    console.log(e);
  }
  onErrorCallback(e){
    console.log('onErrorCallback');
    console.log(e);
  }

Error message:

onErrorCallback
architecture3-d-inner.component.ts:386 TypeError: Failed to fetch
    at zone-evergreen.js:1068:1
    at FileLoader.load (three.module.js:39449:1)
    at ColladaLoader.load (ColladaLoader.js:62:1)
    at architecture3-d-inner.component.ts:333:22
    at Array.forEach (<anonymous>)
    at Architecture3DInnerComponent.loaderData (architecture3-d-inner.component.ts:328:32)
    at SafeSubscriber._next (architecture3-d-inner.component.ts:165:14)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1)
    at SafeSubscriber.next (Subscriber.js:122:1)
    at Subscriber._next (Subscriber.js:72:1)

Example file list

Answer 1

It is not possible to load the Collada asset from the above URL because it violates the CORS policy. The actual error message in the browser console looks like so:

Access to fetch at 'https://gitlab.com/po_developer/high-precision-3d-graphics-of-traditional-buildings/-/raw/master/95b69c0c-fd25-4bcf-a606-64d6619250a6/untitled.dae' from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It's probably best if you host your assets elsewhere.