From d1d3e5f71b55ac36088d5a8c9c8edf4f0ec77df2 Mon Sep 17 00:00:00 2001
From: Emmett Lalish <elalish@google.com>
Date: Tue, 25 May 2021 09:50:09 -0700
Subject: [PATCH] fixed USDZ generation with reveal=interaction (#2421)

---
 packages/model-viewer/src/features/ar.ts     | 19 +++++++++++++------
 packages/modelviewer.dev/index.html          |  2 +-
 packages/modelviewer.dev/styles/examples.css |  4 ++--
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/model-viewer/src/features/ar.ts b/packages/model-viewer/src/features/ar.ts
index 312d006306..96ee08a0f1 100644
--- a/packages/model-viewer/src/features/ar.ts
+++ b/packages/model-viewer/src/features/ar.ts
@@ -64,6 +64,7 @@ const $onARStatus = Symbol('onARStatus');
 const $onARTracking = Symbol('onARTracking');
 const $onARTap = Symbol('onARTap');
 const $selectARMode = Symbol('selectARMode');
+const $triggerLoad = Symbol('triggerLoad');
 
 export declare interface ARInterface {
   ar: boolean;
@@ -260,12 +261,7 @@ configuration or device capabilities');
     protected async[$enterARWithWebXR]() {
       console.log('Attempting to present in AR with WebXR...');
 
-      if (!this.loaded) {
-        this[$preload] = true;
-        this[$updateSource]();
-        await waitForEvent(this, 'load');
-        this[$preload] = false;
-      }
+      await this[$triggerLoad]();
 
       try {
         this[$arButtonContainer].removeEventListener(
@@ -286,6 +282,15 @@ configuration or device capabilities');
       }
     }
 
+    async[$triggerLoad]() {
+      if (!this.loaded) {
+        this[$preload] = true;
+        this[$updateSource]();
+        await waitForEvent(this, 'load');
+        this[$preload] = false;
+      }
+    }
+
     [$shouldAttemptPreload](): boolean {
       return super[$shouldAttemptPreload]() || this[$preload];
     }
@@ -392,6 +397,8 @@ configuration or device capabilities');
     async prepareUSDZ(): Promise<string> {
       const updateSourceProgress = this[$progressTracker].beginActivity();
 
+      await this[$triggerLoad]();
+
       const scene = this[$scene];
 
       const shadow = scene.shadow;
diff --git a/packages/modelviewer.dev/index.html b/packages/modelviewer.dev/index.html
index cd7a983307..cfa644b87e 100644
--- a/packages/modelviewer.dev/index.html
+++ b/packages/modelviewer.dev/index.html
@@ -56,7 +56,7 @@ <h3 class="grouping-title grouping-title-new quick-start">Quick Start</h3>
 <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
 
 <!-- Use it like any other HTML element -->
-<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>
+<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" ar ar-modes="webxr scene-viewer quick-look" environment-image="neutral" auto-rotate camera-controls></model-viewer>
                 </template>
               </example-snippet>
             </div>
diff --git a/packages/modelviewer.dev/styles/examples.css b/packages/modelviewer.dev/styles/examples.css
index 4ef796a8a6..4931f221aa 100644
--- a/packages/modelviewer.dev/styles/examples.css
+++ b/packages/modelviewer.dev/styles/examples.css
@@ -371,7 +371,7 @@ model-viewer:focus {
   box-sizing: border-box;
 }
 
-.examples-container > .sample > .demo {
+.sample > .demo {
   height: 100vh;
 }
 
@@ -754,7 +754,7 @@ paper-button {
     padding-top: 0px;
   }
   
-  .examples-container > .sample > .demo {
+  .sample > .demo {
     top: 0;
     height: 150vw;
   }