Fix AR button overlap on Dynamic Scaling page and resolve HDR bundle bug (#5145)

Author: diegoteran

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

@@ -15,7 +15,7 @@
 
 import {GainMapDecoderMaterial, HDRJPGLoader, QuadRenderer} from '@monogrid/gainmap-js';
 import {BackSide, BoxGeometry, CubeCamera, CubeTexture, DataTexture, EquirectangularReflectionMapping, HalfFloatType, LinearSRGBColorSpace, Loader, Mesh, NoBlending, NoToneMapping, RGBAFormat, Scene, ShaderMaterial, SRGBColorSpace, Texture, TextureLoader, Vector3, WebGLCubeRenderTarget, WebGLRenderer} from 'three';
-import {HDRLoader} from 'three/examples/jsm/loaders/HDRLoader.js';
+import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js';
 
 import {deserializeUrl, timePasses} from '../utilities.js';
 
@@ -40,7 +40,7 @@ export default class TextureUtils {
 
   private _ldrLoader: TextureLoader|null = null;
   private _imageLoader: HDRJPGLoader|null = null;
-  private _hdrLoader: HDRLoader|null = null;
+  private _hdrLoader: RGBELoader|null = null;
   private _lottieLoader: Loader|null = null;
 
   private generatedEnvironmentMap: Promise<CubeTexture>|null = null;
@@ -70,9 +70,9 @@ export default class TextureUtils {
     return this._imageLoader;
   }
 
-  private hdrLoader(withCredentials: boolean): HDRLoader {
+  private hdrLoader(withCredentials: boolean): RGBELoader {
     if (this._hdrLoader == null) {
-      this._hdrLoader = new HDRLoader();
+      this._hdrLoader = new RGBELoader();
       this._hdrLoader.setDataType(HalfFloatType);
     }
     this._hdrLoader.setWithCredentials(withCredentials);
@@ -136,7 +136,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/examples/loading/index.html

@@ -114,15 +114,6 @@ <h4></h4>
                     transform: translate3d(-50%, -50%, 0);
                     z-index: 100;
                   }
-
-                  .controls {
-                    position: absolute;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: left;
-                    bottom: 8px;
-                    left: 8px;
-                  }
                 </style>
                 <!-- use unique asset to ensure lazy loading -->
                 <model-viewer id="lazy-load" camera-controls touch-action="pan-y" reveal="manual"
@@ -433,6 +424,26 @@ <h4>Our renderer tries to keep the frame rate between 38 and 60 frames per secon
             </div>
             <example-snippet stamp-to="renderScale" highlight-as="html">
               <template>
+                <style>
+                  model-viewer#scale {
+                    container-type: size;
+                  }
+                  .controls {
+                    position: absolute;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    top: 16px;
+                    left: 16px;
+                    transform: translateY(calc(100cqh - 100% - 32px));
+                    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+                  }
+                  @container (max-width: 550px) {
+                    .controls {
+                      transform: translateY(0px);
+                    }
+                  }
+                </style>
                 <model-viewer id="scale" alt="A 3D model of a toy car" camera-controls touch-action="pan-y" auto-rotate
                   src="../../shared-assets/models/glTF-Sample-Assets/Models/ToyCar/glTF-Binary/ToyCar.glb" ar>
                   <div class="controls glass">