diff --git a/packages/model-viewer/src/features/environment.ts b/packages/model-viewer/src/features/environment.ts index 2cded27c0f..d501e06171 100644 --- a/packages/model-viewer/src/features/environment.ts +++ b/packages/model-viewer/src/features/environment.ts @@ -133,7 +133,8 @@ export const EnvironmentMixin = >( await textureUtils.generateEnvironmentMapAndSkybox( deserializeUrl(skyboxImage), environmentImage, - (progress: number) => updateEnvProgress(clamp(progress, 0, 1))); + (progress: number) => updateEnvProgress(clamp(progress, 0, 1)), + this.withCredentials); if (this[$currentEnvironmentMap] !== environmentMap) { this[$currentEnvironmentMap] = environmentMap; diff --git a/packages/model-viewer/src/features/scene-graph.ts b/packages/model-viewer/src/features/scene-graph.ts index 3be47d7498..f7977f70ad 100644 --- a/packages/model-viewer/src/features/scene-graph.ts +++ b/packages/model-viewer/src/features/scene-graph.ts @@ -131,7 +131,7 @@ export const SceneGraphMixin = >( async createTexture(uri: string, type: string = 'image/png'): Promise { const {textureUtils} = this[$renderer]; - const texture = await textureUtils!.loadImage(uri); + const texture = await textureUtils!.loadImage(uri, this.withCredentials); texture.userData.mimeType = type; @@ -141,14 +141,16 @@ export const SceneGraphMixin = >( async createLottieTexture(uri: string, quality = 1): Promise { const {textureUtils} = this[$renderer]; - const texture = await textureUtils!.loadLottie(uri, quality); + const texture = + await textureUtils!.loadLottie(uri, quality, this.withCredentials); return this[$buildTexture](texture); } createVideoTexture(uri: string): ModelViewerTexture { const video = document.createElement('video'); - video.crossOrigin = this.withCredentials ? 'use-credentials' : 'anonymous'; + video.crossOrigin = + this.withCredentials ? 'use-credentials' : 'anonymous'; video.src = uri; video.muted = true; video.playsInline = true; @@ -170,7 +172,8 @@ export const SceneGraphMixin = >( 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; diff --git a/packages/model-viewer/src/model-viewer-base.ts b/packages/model-viewer/src/model-viewer-base.ts index e3f8893dd7..3077912a1d 100644 --- a/packages/model-viewer/src/model-viewer-base.ts +++ b/packages/model-viewer/src/model-viewer-base.ts @@ -404,11 +404,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 +608,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( diff --git a/packages/model-viewer/src/three-components/CachingGLTFLoader.ts b/packages/model-viewer/src/three-components/CachingGLTFLoader.ts index ba4d140eae..7abe9af8cf 100644 --- a/packages/model-viewer/src/three-components/CachingGLTFLoader.ts +++ b/packages/model-viewer/src/three-components/CachingGLTFLoader.ts @@ -86,8 +86,6 @@ export class CachingGLTFLoader extends EventDispatcher< {'preload': {element: ModelViewerElementBase, src: String}}> { - static withCredentials: boolean; - static setDRACODecoderLocation(url: string) { dracoDecoderLocation = url; dracoLoader.setDecoderPath(url); @@ -188,7 +186,7 @@ export class CachingGLTFLoader {}) { - this[$loader].setWithCredentials(CachingGLTFLoader.withCredentials); + this[$loader].setWithCredentials(element.withCredentials); this.dispatchEvent({type: 'preload', element: element, src: url}); if (!cache.has(url)) { if (meshoptDecoder != null) { diff --git a/packages/model-viewer/src/three-components/TextureUtils.ts b/packages/model-viewer/src/three-components/TextureUtils.ts index 4db0735114..5fc078bb22 100644 --- a/packages/model-viewer/src/three-components/TextureUtils.ts +++ b/packages/model-viewer/src/three-components/TextureUtils.ts @@ -35,7 +35,6 @@ const HDR_FILE_RE = /\.hdr(\.js)?$/; export default class TextureUtils { public lottieLoaderUrl = ''; - public withCredentials = false; private _ldrLoader: TextureLoader|null = null; private _imageLoader: HDRJPGLoader|null = null; @@ -53,53 +52,54 @@ export default class TextureUtils { constructor(private threeRenderer: WebGLRenderer) { } - get ldrLoader(): TextureLoader { + private ldrLoader(withCredentials: boolean): TextureLoader { if (this._ldrLoader == null) { this._ldrLoader = new TextureLoader(); } - this._ldrLoader.setWithCredentials(this.withCredentials); + this._ldrLoader.setWithCredentials(withCredentials); return this._ldrLoader; } - get imageLoader(): HDRJPGLoader { + private imageLoader(withCredentials: boolean): HDRJPGLoader { if (this._imageLoader == null) { this._imageLoader = new HDRJPGLoader(this.threeRenderer); } - this._imageLoader.setWithCredentials(this.withCredentials); + this._imageLoader.setWithCredentials(withCredentials); return this._imageLoader; } - get hdrLoader(): RGBELoader { + private hdrLoader(withCredentials: boolean): RGBELoader { if (this._hdrLoader == null) { this._hdrLoader = new RGBELoader(); this._hdrLoader.setDataType(HalfFloatType); } - this._hdrLoader.setWithCredentials(this.withCredentials); + this._hdrLoader.setWithCredentials(withCredentials); return this._hdrLoader; } - async getLottieLoader(): Promise { + async getLottieLoader(withCredentials: boolean): Promise { if (this._lottieLoader == null) { const {LottieLoader} = await import(/* webpackIgnore: true */ this.lottieLoaderUrl); this._lottieLoader = new LottieLoader() as Loader; } - this._lottieLoader.setWithCredentials(this.withCredentials); + this._lottieLoader.setWithCredentials(withCredentials); return this._lottieLoader; } - async loadImage(url: string): Promise { + async loadImage(url: string, withCredentials: boolean): Promise { const texture: Texture = await new Promise( - (resolve, reject) => - this.ldrLoader.load(url, resolve, () => {}, reject)); + (resolve, reject) => this.ldrLoader(withCredentials) + .load(url, resolve, () => {}, reject)); texture.name = url; texture.flipY = false; return texture; } - async loadLottie(url: string, quality: number): Promise { - const loader = await this.getLottieLoader(); + async loadLottie(url: string, quality: number, withCredentials: boolean): + Promise { + const loader = await this.getLottieLoader(withCredentials); loader.setQuality(quality); const texture: Texture = await new Promise( (resolve, reject) => loader.load(url, resolve, () => {}, reject)); @@ -109,11 +109,13 @@ export default class TextureUtils { } async loadEquirect( - url: string, progressCallback: (progress: number) => void = () => {}): + url: string, withCredentials = false, + progressCallback: (progress: number) => void = () => {}): Promise { try { const isHDR: boolean = HDR_FILE_RE.test(url); - const loader = isHDR ? this.hdrLoader : this.imageLoader; + const loader = isHDR ? this.hdrLoader(withCredentials) : + this.imageLoader(withCredentials); const texture: Texture = await new Promise( (resolve, reject) => loader.load( url, @@ -158,8 +160,8 @@ export default class TextureUtils { */ async generateEnvironmentMapAndSkybox( skyboxUrl: string|null = null, environmentMapUrl: string|null = null, - progressCallback: (progress: number) => void = () => {}): - Promise { + progressCallback: (progress: number) => void = () => {}, + withCredentials = false): Promise { const useAltEnvironment = environmentMapUrl !== 'legacy'; if (environmentMapUrl === 'legacy' || environmentMapUrl === 'neutral') { environmentMapUrl = null; @@ -171,17 +173,18 @@ export default class TextureUtils { // If we have a skybox URL, attempt to load it as a cubemap if (!!skyboxUrl) { - skyboxLoads = this.loadEquirectFromUrl(skyboxUrl, progressCallback); + skyboxLoads = this.loadEquirectFromUrl( + skyboxUrl, withCredentials, progressCallback); } if (!!environmentMapUrl) { // We have an available environment map URL - environmentMapLoads = - this.loadEquirectFromUrl(environmentMapUrl, progressCallback); + environmentMapLoads = this.loadEquirectFromUrl( + environmentMapUrl, withCredentials, progressCallback); } else if (!!skyboxUrl) { // Fallback to deriving the environment map from an available skybox - environmentMapLoads = - this.loadEquirectFromUrl(skyboxUrl, progressCallback); + environmentMapLoads = this.loadEquirectFromUrl( + skyboxUrl, withCredentials, progressCallback); } else { // Fallback to generating the environment map environmentMapLoads = useAltEnvironment ? @@ -203,10 +206,11 @@ export default class TextureUtils { * Loads an equirect Texture from a given URL, for use as a skybox. */ private async loadEquirectFromUrl( - url: string, + url: string, withCredentials: boolean, progressCallback: (progress: number) => void): Promise { if (!this.skyboxCache.has(url)) { - const skyboxMapLoads = this.loadEquirect(url, progressCallback); + const skyboxMapLoads = + this.loadEquirect(url, withCredentials, progressCallback); this.skyboxCache.set(url, skyboxMapLoads); }