fix USDZ positioning (#4759)

Author: elalish

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

@@ -441,10 +441,16 @@ configuration or device capabilities');
       updateSourceProgress(0.2);
 
       const exporter = new USDZExporter();
+
       target.remove(model);
+      model.position.copy(target.position);
       model.updateWorldMatrix(false, true);
+
       const arraybuffer = await exporter.parse(model);
+
+      model.position.set(0, 0, 0);
       target.add(model);
+
       const blob = new Blob([arraybuffer], {
         type: 'model/vnd.usdz+zip',
       });

packages/modelviewer.dev/examples/augmentedreality/index.html

@@ -312,11 +312,11 @@ <h4>This demonstrates several augmented reality modes, including
         <div class="wrapper">
           <div class="heading">
             <h2 class="demo-title">Scene Viewer</h2>
-            <h4>Here the Scene Viewer app is given priority, to make it easier to compare with the default WebXR, above.</h4>
+            <h4>Here the Scene Viewer app is given priority, to make it easier to compare with the default WebXR, above. This also uses USDZ auto-generation for AR Quick Look on iOS, as compared to the separate ios-src file given above.</h4>
           </div>
           <example-snippet stamp-to="sceneViewer" highlight-as="html">
             <template>
-<model-viewer id="model-viewer" src="../../shared-assets/models/Astronaut.glb" ar ar-modes="scene-viewer" camera-controls touch-action="pan-y" alt="A 3D model of an astronaut" shadow-intensity="2" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.jpg" skybox-height="2m" max-camera-orbit="auto 90deg auto">
+<model-viewer id="model-viewer" src="../../shared-assets/models/Astronaut.glb" ar ar-modes="scene-viewer quick-look" camera-controls touch-action="pan-y" alt="A 3D model of an astronaut" shadow-intensity="2" auto-rotate disable-pan skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.jpg" skybox-height="2m" max-camera-orbit="auto 90deg auto">
   <div id="error" class="hide">AR is not supported on this device</div>
 </model-viewer>
 <script>

packages/modelviewer.dev/examples/lightingandenv/index.html

@@ -81,7 +81,7 @@ <h2 class="demo-title">Ground-projected Skybox</h2>
           </div>
           <example-snippet stamp-to="groundedSkybox" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" auto-rotate disable-pan skybox-image="../../shared-assets/environments/whipple_creek_regional_park_1k_HDR.jpg" skybox-height="1.5m" shadow-intensity="2" max-camera-orbit="auto 90deg auto" alt="A 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut.glb"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" disable-pan skybox-image="../../shared-assets/environments/whipple_creek_regional_park_1k_HDR.jpg" skybox-height="1.5m" shadow-intensity="2" max-camera-orbit="auto 90deg auto" alt="A 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut.glb"></model-viewer>
             </template>
           </example-snippet>
         </div>