fixed pan example (google#1788)

HiriNux · Dec 29, 2020 · 322d3a7 · 322d3a7
1 parent f014ddc
commit 322d3a7
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/packages/modelviewer.dev/examples/stagingandcameras/index.html b/packages/modelviewer.dev/examples/stagingandcameras/index.html
@@ -211,7 +211,7 @@ <h4>Event listeners can cooperate with camera-controls</h4>
           </div>
           <example-snippet stamp-to="panning" highlight-as="html">
             <template>
-<model-viewer id="pan-demo" camera-controls src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut"></model-viewer>
+<model-viewer id="pan-demo" auto-rotate camera-controls src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut"></model-viewer>
 <script>
 (() => {
   const modelViewer = document.querySelector('#pan-demo');
@@ -225,12 +225,13 @@ <h4>Event listeners can cooperate with camera-controls</h4>
   const startPan = () => {
     const orbit = modelViewer.getCameraOrbit();
     const {theta, phi, radius} = orbit;
+    const psi = theta - modelViewer.turntableRotation;
     metersPerPixel = 0.75 * radius / modelViewer.getBoundingClientRect().height;
-    panX = [-Math.cos(theta), 0, Math.sin(theta)];
+    panX = [-Math.cos(psi), 0, Math.sin(psi)];
     panY = [
-      -Math.cos(phi) * Math.sin(theta),
+      -Math.cos(phi) * Math.sin(psi),
       Math.sin(phi),
-      -Math.cos(phi) * Math.cos(theta)
+      -Math.cos(phi) * Math.cos(psi)
     ];
     modelViewer.interactionPrompt = 'none';
   };
@@ -246,6 +247,10 @@ <h4>Event listeners can cooperate with camera-controls</h4>
     target.y += dx * panX[1] + dy * panY[1];
     target.z += dx * panX[2] + dy * panY[2];
     modelViewer.cameraTarget = `${target.x}m ${target.y}m ${target.z}m`;
+
+    // This pauses turntable rotation
+    modelViewer.dispatchEvent(new CustomEvent(
+          'camera-change', {detail: {source: 'user-interaction'}}));
   };
 
   const recenter = (pointer) => {