make withCredentials static

packages/model-viewer/src/features/loading.ts

@@ -77,6 +77,7 @@ export declare interface LoadingStaticInterface {
   ktx2TranscoderLocation: string;
   meshoptDecoderLocation: string;
   lottieLoaderLocation: string;
+  withCredentials: boolean;
   mapURLs(callback: (url: string) => string): void;
 }
 
@@ -173,6 +174,15 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
       return Renderer.singleton.textureUtils!.lottieLoaderUrl
     }
 
+    static set withCredentials(value: boolean) {
+      CachingGLTFLoader.withCredentials = value;
+      Renderer.singleton.textureUtils!.withCredentials = value;
+    }
+
+    static get withCredentials() {
+      return CachingGLTFLoader.withCredentials;
+    }
+
     /**
      * If provided, the callback will be passed each resource URL before a
      * request is sent. The callback may return the original URL, or a new URL
@@ -295,7 +305,8 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
           parentNode.appendChild(this[$defaultProgressBarElement]);
         }
 
-        this[$defaultProgressBarElement].classList.toggle('hide', progress === 1.0);
+        this[$defaultProgressBarElement].classList.toggle(
+            'hide', progress === 1.0);
       });
     }, PROGRESS_BAR_UPDATE_THRESHOLD);
 
@@ -373,8 +384,8 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
 
       this[$updateProgressBar](progress);
 
-      this.dispatchEvent(
-          new CustomEvent('progress', {detail: {totalProgress: progress, reason}}));
+      this.dispatchEvent(new CustomEvent(
+          'progress', {detail: {totalProgress: progress, reason}}));
     };
 
     [$shouldAttemptPreload](): boolean {

packages/model-viewer/src/features/scene-graph.ts

@@ -18,6 +18,7 @@ import {CanvasTexture, RepeatWrapping, SRGBColorSpace, Texture, VideoTexture} fr
 import {GLTFExporter, GLTFExporterOptions} from 'three/examples/jsm/exporters/GLTFExporter.js';
 
 import ModelViewerElementBase, {$needsRender, $onModelLoad, $progressTracker, $renderer, $scene} from '../model-viewer-base.js';
+import {CachingGLTFLoader} from '../three-components/CachingGLTFLoader.js';
 import {GLTF} from '../three-components/gltf-instance/gltf-defaulted.js';
 import {ModelViewerGLTFInstance} from '../three-components/gltf-instance/ModelViewerGLTFInstance.js';
 import GLTFExporterMaterialsVariantsExtension from '../three-components/gltf-instance/VariantMaterialExporterPlugin.js';
@@ -148,7 +149,8 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
 
     createVideoTexture(uri: string): ModelViewerTexture {
       const video = document.createElement('video');
-      video.crossOrigin = this.withCredentials ? 'use-credentials' : 'anonymous';
+      video.crossOrigin =
+          CachingGLTFLoader.withCredentials ? 'use-credentials' : 'anonymous';
       video.src = uri;
       video.muted = true;
       video.playsInline = true;
@@ -170,7 +172,8 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
       super.updated(changedProperties);
 
       if (changedProperties.has('variantName')) {
-        const updateVariantProgress = this[$progressTracker].beginActivity('variant-update');
+        const updateVariantProgress =
+            this[$progressTracker].beginActivity('variant-update');
         updateVariantProgress(0.1);
         const model = this[$model];
         const {variantName} = this;

packages/model-viewer/src/model-viewer-base.ts

@@ -173,9 +173,6 @@ export default class ModelViewerElementBase extends ReactiveElement {
 
   @property({type: String}) src: string|null = null;
 
-  @property({type: Boolean, attribute: 'with-credentials'})
-  withCredentials: boolean = false;
-
   /**
    * Generates a 3D model schema https://schema.org/3DModel associated with
    * the loaded src and inserts it into the header of the page for search
@@ -404,11 +401,6 @@ export default class ModelViewerElementBase extends ReactiveElement {
       this[$userInputElement].setAttribute('aria-label', this[$ariaLabel]);
     }
 
-    if (changedProperties.has('withCredentials')) {
-      CachingGLTFLoader.withCredentials = this.withCredentials;
-      this[$renderer].textureUtils!.withCredentials = this.withCredentials;
-    }
-
     if (changedProperties.has('generateSchema')) {
       if (this.generateSchema) {
         this[$scene].updateSchema(this.src);
@@ -613,7 +605,8 @@ export default class ModelViewerElementBase extends ReactiveElement {
     // throw exceptions and/or behave in unexpected ways:
     scene.stopAnimation();
 
-    const updateSourceProgress = this[$progressTracker].beginActivity('model-load');
+    const updateSourceProgress =
+        this[$progressTracker].beginActivity('model-load');
     const source = this.src;
     try {
       const srcUpdated = scene.setSource(

packages/model-viewer/src/three-components/TextureUtils.ts

@@ -117,7 +117,7 @@ export default class TextureUtils {
       const texture: Texture = await new Promise<Texture>(
           (resolve, reject) => loader.load(
               url,
-              (result) => {
+              (result: any) => {
                 const {renderTarget} =
                     result as QuadRenderer<1016, GainMapDecoderMaterial>;
                 if (renderTarget != null) {

packages/modelviewer.dev/data/docs.json

@@ -63,18 +63,6 @@
           "options": "auto, manual"
         }
       },
-      {
-        "name": "with-credentials",
-        "htmlName": "withCredentials",
-        "description": "This attribute makes the browser include credentials (cookies, authorization headers or TLS client certificates) in the request to fetch the 3D model. It's useful if the 3D model file is stored on another server that require authentication. By default the file will be fetch without credentials. Note that this has no effect if you are loading files locally or from the same domain.",
-        "links": [
-          "<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials\">MDN documentation</a>"
-        ],
-        "default": {
-          "default": "false",
-          "options": "true, false"
-        }
-      },
       {
         "name": "a11y",
         "htmlName": "a11y",
@@ -138,6 +126,18 @@
         "htmlName": "lottieLoaderLocation",
         "description": "This static, writable property sets <span class='attribute'>&lt;model-viewer&gt;</span>'s LottieLoader location URL. The default URL is <code>https://cdn.jsdelivr.net/npm/three@0.146.0/examples/jsm/loaders/LottieLoader.js</code>. It will also require the server to provide the lottie canvas module at <code>../libs/lottie_canvas.module.js</code>."
       },
+      {
+        "name": "with-credentials",
+        "htmlName": "withCredentials",
+        "description": "This attribute makes the browser include credentials (cookies, authorization headers or TLS client certificates) in the request to fetch each 3D model. It's useful if the 3D model file is stored on another server that require authentication. By default the file will be fetch without credentials. Note that this has no effect if you are loading files locally or from the same domain.",
+        "links": [
+          "<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials\">MDN documentation</a>"
+        ],
+        "default": {
+          "default": "false",
+          "options": "true, false"
+        }
+      },
       {
         "name": "minimumRenderScale",
         "htmlName": "minimumRenderScale",