fixed two examples bugs (#4932)

* fixed two examples bugs

* hiding the lines

* simplify

Author: elalish

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

@@ -174,15 +174,26 @@ <h4 id="intro"><span class="font-medium">Animated Hotspots. </span></h4>
   let tailRect;
 
   function onResize(){
-    baseRect = modelViewer1.getBoundingClientRect();
+    const arStatus = modelViewer1.getAttribute('ar-status');
+    baseRect = (arStatus == "not-presenting" || arStatus == "failed") ? 
+      modelViewer1.getBoundingClientRect() : new DOMRect();
     noseRect = document.querySelector('#nose').getBoundingClientRect();
     hoofRect = document.querySelector('#hoof').getBoundingClientRect();
     tailRect = document.querySelector('#tail').getBoundingClientRect();
   }
 
   window.addEventListener("resize", onResize);
 
-  modelViewer1.addEventListener('ar-status', onResize);
+  modelViewer1.addEventListener('ar-status', (event) => {
+    lines.forEach((element) => {
+      if (event.detail.status !== 'session-started') {
+        element.classList.remove('hide');
+      } else {
+        element.classList.add('hide');
+      }
+    });
+    onResize();
+  });
 
   modelViewer1.addEventListener('load', () => {
     onResize();

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

@@ -305,7 +305,7 @@ <h2 class="demo-title">Combining Effects</h2>
           </div>
           <example-snippet stamp-to="combining-effects" highlight-as="html">
             <template>
-<model-viewer id="effectsViewer" camera-controls touch-action="pan-y" src="../../shared-assets/models/EmissiveStrengthTest.glb" ar alt="A 3D ">
+<model-viewer id="effectsViewer" camera-controls scale="0.1 0.1 0.1" touch-action="pan-y" src="../../shared-assets/models/EmissiveStrengthTest.glb" ar alt="A 3D ">
   <effect-composer render-mode="quality">
     <outline-effect color="blue" blend-mode="skip"></outline-effect>
     <ssao-effect blend-mode="skip"></ssao-effect>