fixed USDZ generation with reveal=interaction (google#2421)

Synantoo · May 25, 2021 · d1d3e5f · d1d3e5f
1 parent 8c82352
commit d1d3e5f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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;
   }