feat: loaders should use setRequestHeader (#267)

* Loaders should use setRequestHeader

* Mention requestHeader prop in Readme

Author: vincent

README.md

@@ -79,6 +79,7 @@ Or
 | backgroundAlpha | number        | 1                    | 0.5                                        |
 | controlsOptions | object        | -                    | see [OrbitControls Properties](https://threejs.org/docs/#examples/en/controls/OrbitControls) |
 | crossOrigin     | string        | anonymous            | anonymous/use-credentials                  |
+| requestHeader   | object        | -                    | { 'Authorization: Bearer token' }          |
 | outputEncoding     | number       | THREE.LinearEncoding                | see [WebGLRenderer OutputEncoding](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.outputEncoding)                                 |
 | glOptions       | object        | { antialias: true, alpha: true }  | see [WebGLRenderer Parameters](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer) |
 

src/model-gltf.vue

@@ -31,6 +31,7 @@ export default {
   data() {
     const loader = new GLTFLoader();
     loader.setCrossOrigin(this.crossOrigin);
+    loader.setRequestHeader(this.requestHeader);
 
     return {
       loader,

src/model-mixin.vue

@@ -109,6 +109,9 @@ export default {
     crossOrigin: {
       default: 'anonymous',
     },
+    requestHeader: {
+      default: {},
+    },
     outputEncoding: {
       type: Number,
       default: LinearEncoding,
@@ -428,6 +431,7 @@ export default {
         this.wrapper.remove(this.object);
       }
 
+      this.loader.setRequestHeader(this.requestHeader);
       this.loader.load(this.src, (...args) => {
         const object = this.getObject(...args);
 

src/model-obj.vue

@@ -50,6 +50,8 @@ export default {
     const mtlLoader = new MTLLoader(manager);
 
     mtlLoader.setCrossOrigin(this.crossOrigin);
+    mtlLoader.setRequestHeader(this.requestHeader);
+    objLoader.setRequestHeader(this.requestHeader);
 
     return {
       loader: objLoader,

src/model-three.vue

@@ -8,6 +8,7 @@ export default {
   data() {
     const loader = new ObjectLoader();
     loader.setCrossOrigin(this.crossOrigin);
+    loader.setRequestHeader(this.requestHeader);
 
     return {
       loader,