default touch-action to none (google#3712)

* added pan-y to dev pages * change default
lineCode · Aug 16, 2022 · 187bbbc · 187bbbc
1 parent d896566
commit 187bbbc
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 54 deletions.
diff --git a/packages/model-viewer/src/features/controls.ts b/packages/model-viewer/src/features/controls.ts
@@ -321,7 +321,7 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
     orbitSensitivity: number = 1;
 
     @property({type: String, attribute: 'touch-action'})
-    touchAction: TouchAction = TouchAction.PAN_Y;
+    touchAction: TouchAction = TouchAction.NONE;
 
     @property({type: Boolean, attribute: 'disable-zoom'})
     disableZoom: boolean = false;

diff --git a/packages/model-viewer/src/three-components/SmoothControls.ts b/packages/model-viewer/src/three-components/SmoothControls.ts
@@ -64,7 +64,7 @@ export const DEFAULT_OPTIONS = Object.freeze<SmoothControlsOptions>({
   maximumAzimuthalAngle: Infinity,
   minimumFieldOfView: 10,
   maximumFieldOfView: 45,
-  touchAction: 'pan-y'
+  touchAction: 'none'
 });
 
 // Constants

diff --git a/packages/modelviewer.dev/examples/animation/index.html b/packages/modelviewer.dev/examples/animation/index.html
@@ -56,7 +56,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="autoplay" highlight-as="html">
             <template>
-<model-viewer camera-controls autoplay ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" autoplay ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -73,7 +73,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="selectingAnimations" highlight-as="html">
             <template>
-<model-viewer camera-controls autoplay animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" autoplay animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -90,7 +90,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="controlSpeed" highlight-as="html">
             <template>
-<model-viewer id="change-speed-demo" camera-controls animation-name="Dance" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
+<model-viewer id="change-speed-demo" camera-controls touch-action="pan-y" animation-name="Dance" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
 <script type="module">
   const modelViewer = document.querySelector('#change-speed-demo');
   const speeds = [1, 2, 0.5, -1];
@@ -119,7 +119,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="crossFade" highlight-as="html">
             <template>
-<model-viewer id="paused-change-demo" camera-controls autoplay animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
+<model-viewer id="paused-change-demo" camera-controls touch-action="pan-y" autoplay animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
 <script>
 (() => {
   const modelViewer = document.querySelector('#paused-change-demo');
@@ -146,7 +146,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="paused" highlight-as="html">
             <template>
-<model-viewer id="xfade-demo" camera-controls animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
+<model-viewer id="xfade-demo" camera-controls touch-action="pan-y" animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
 <script>
 (() => {
   const modelViewer = document.querySelector('#xfade-demo');

diff --git a/packages/modelviewer.dev/examples/annotations/index.html b/packages/modelviewer.dev/examples/annotations/index.html
@@ -106,7 +106,7 @@ <h4></h4>
     display: none;
   }
 </style>
-<model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut.">
+<model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut.">
   <button slot="hotspot-visor" data-position="0 1.75 0.35" data-normal="0 0 1"></button>
   <button slot="hotspot-hand" data-position="-0.54 0.93 0.1" data-normal="-0.73 0.05 0.69">
     <div id="annotation">This hotspot disappears completely</div>
@@ -189,7 +189,7 @@ <h4 id="intro"><span class="font-medium">Show Dimensions. </span></h4>
     display: none;
   }
 </style>
-<model-viewer id="dimension-demo" ar ar-modes="webxr" ar-scale="fixed" camera-orbit="-30deg auto auto" max-camera-orbit="auto 100deg auto" shadow-intensity="1" camera-controls src="../../assets/ShopifyModels/Chair.glb" alt="A 3D model of an armchair.">
+<model-viewer id="dimension-demo" ar ar-modes="webxr" ar-scale="fixed" camera-orbit="-30deg auto auto" max-camera-orbit="auto 100deg auto" shadow-intensity="1" camera-controls touch-action="pan-y" src="../../assets/ShopifyModels/Chair.glb" alt="A 3D model of an armchair.">
   <button slot="hotspot-dot+X-Y+Z" class="dot" data-position="1 -1 1" data-normal="1 0 0"></button>
   <button slot="hotspot-dim+X-Y" class="dim" data-position="1 -1 0" data-normal="1 0 0"></button>
   <button slot="hotspot-dot+X-Y-Z" class="dot" data-position="1 -1 -1" data-normal="1 0 0"></button>

diff --git a/packages/modelviewer.dev/examples/augmentedreality/index.html b/packages/modelviewer.dev/examples/augmentedreality/index.html
@@ -81,7 +81,7 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
           </div>
           <example-snippet stamp-to="webXR" highlight-as="html">
             <template>
-<model-viewer src="../../assets/ShopifyModels/Chair.glb" poster="../../assets/ShopifyModels/Chair.webp" shadow-intensity="1" ar ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D model carousel">
+<model-viewer src="../../assets/ShopifyModels/Chair.glb" poster="../../assets/ShopifyModels/Chair.webp" shadow-intensity="1" ar ar-modes="webxr scene-viewer quick-look" camera-controls touch-action="pan-y" alt="A 3D model carousel">
 
   <button slot="ar-button" id="ar-button">
     View in your space
@@ -300,7 +300,7 @@ <h4>This demonstrates several augmented reality modes, including
           </div>
           <example-snippet stamp-to="ar" highlight-as="html">
             <template>
-<model-viewer src="../../shared-assets/models/Astronaut.glb" ar ar-scale="fixed" camera-controls alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr" ios-src="../../shared-assets/models/Astronaut.usdz" xr-environment></model-viewer>
+<model-viewer src="../../shared-assets/models/Astronaut.glb" ar ar-scale="fixed" camera-controls touch-action="pan-y" alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr" ios-src="../../shared-assets/models/Astronaut.usdz" xr-environment></model-viewer>
             </template>
           </example-snippet>
 
@@ -318,7 +318,7 @@ <h4>Here the Scene Viewer app is given priority, to make it easier to compare wi
           </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 webxr" camera-controls alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr">
+<model-viewer id="model-viewer" src="../../shared-assets/models/Astronaut.glb" ar ar-modes="scene-viewer webxr" camera-controls touch-action="pan-y" alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr">
   <div id="error" class="hide">AR is not supported on this device</div>
 </model-viewer>
 <script>
@@ -365,7 +365,7 @@ <h4>This demonstrates the <code>ar-placement</code> attribute, which defaults to
           </div>
           <example-snippet stamp-to="wall" highlight-as="html">
             <template>
-<model-viewer src="../../assets/boom_2_.glb" ar ar-placement="wall" ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D model of some wall art"></model-viewer>
+<model-viewer src="../../assets/boom_2_.glb" ar ar-placement="wall" ar-modes="webxr scene-viewer quick-look" camera-controls touch-action="pan-y" alt="A 3D model of some wall art"></model-viewer>
             </template>
           </example-snippet>
 
@@ -384,7 +384,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="customButton" highlight-as="html">
             <template>
-<model-viewer ar ar-modes="webxr scene-viewer quick-look" camera-controls src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
+<model-viewer ar ar-modes="webxr scene-viewer quick-look" camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
   <button slot="ar-button" style="background-color: white; border-radius: 4px; border: none; position: absolute; top: 16px; right: 16px; ">
       👋 Activate AR
   </button>
@@ -396,8 +396,8 @@ <h4></h4>
               Since this slot will only appear on an AR enabled device screenshots are provided below. They compare the &lt;model-viewer&gt; default button in the bottom right and a custom button ("👋 Activate AR") in the top right of the viewport, with a custom style.
           </p>
 
-          <img class="eg-image" src="../../assets/eg-default-ar-button.jpg" alt="Image displaying the default <model-viewer> button of a box with slits cut out in the lower-right, next to the example astronaut model." />
-          <img class="eg-image" src="../../assets/eg-custom-ar-button.jpg" alt="Image displaying <model-viewer> with a custom button reading '👋 Activate AR'." / >
+          <img class="eg-image" src="../../assets/eg-default-ar-button.jpg" alt="Image displaying the default model-viewer button of a box with slits cut out in the lower-right, next to the example astronaut model." />
+          <img class="eg-image" src="../../assets/eg-custom-ar-button.jpg" alt="Image displaying model-viewer with a custom button reading '👋 Activate AR'." / >
         </div>
       </div>
     </div>
@@ -414,7 +414,7 @@ <h4></h4>
               <template>
 <div class="demo" style="background: linear-gradient(#ffffff, #ada996); overflow-x: hidden;">
   <span style="position: absolute; text-align: center; font-size: 100px; line-height: 100px; left: 50%; transform: translateX(-50%);">Background<br>is visible<br>through<br>transparent<br>objects.</span>
-  <model-viewer camera-controls src="../../shared-assets/models/glTF-Sample-Models/2.0/ToyCar/glTF-Binary/ToyCar.glb" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
+  <model-viewer camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/ToyCar/glTF-Binary/ToyCar.glb" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
 </div>
               </template>
             </example-snippet>

diff --git a/packages/modelviewer.dev/examples/lightingandenv/index.html b/packages/modelviewer.dev/examples/lightingandenv/index.html
@@ -63,7 +63,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="hdrSkyboyImage" highlight-as="html">
             <template>
-<model-viewer camera-controls skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a damaged helmet" src="../../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a damaged helmet" src="../../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -80,7 +80,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="litModel" highlight-as="html">
             <template>
-<model-viewer camera-controls skybox-image="../../assets/whipple_creek_regional_park_04_1k.hdr" 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" skybox-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut.glb"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -97,7 +97,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="unlitModel" highlight-as="html">
             <template>
-<model-viewer camera-controls skybox-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="An unlit 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut-Unlit.glb"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="An unlit 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut-Unlit.glb"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -114,7 +114,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="environmentLighting" highlight-as="html">
             <template>
-<model-viewer camera-controls environment-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D model of a sphere reflecting a forest, on a pink background" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" environment-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D model of a sphere reflecting a forest, on a pink background" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -138,7 +138,7 @@ <h4>If no environment or skybox is specified, we have a baked-in
           </div>
           <example-snippet stamp-to="neutralLighting" highlight-as="html">
             <template>
-<model-viewer id="neutral-demo" camera-controls auto-rotate alt="A 3D model of a kitchen mixer" src="../../assets/ShopifyModels/Mixer.glb">
+<model-viewer id="neutral-demo" camera-controls touch-action="pan-y" auto-rotate alt="A 3D model of a kitchen mixer" src="../../assets/ShopifyModels/Mixer.glb">
   <label for="neutral">Neutral Lighting: </label>
   <input id="neutral" type="checkbox" checked="true">
 </model-viewer>
@@ -168,7 +168,7 @@ <h4></h4>
         </div>
         <example-snippet stamp-to="renderExposure" highlight-as="html">
           <template>
-<model-viewer camera-controls id="exposure-demo" exposure="1" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a sphere reflecting a sunrise at varying exposure" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" id="exposure-demo" exposure="1" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a sphere reflecting a sunrise at varying exposure" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
 <script>
 (() => {
   const modelViewer = document.querySelector('#exposure-demo');
@@ -198,7 +198,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="shadows" highlight-as="html">
             <template>
-<model-viewer camera-controls id="shadow-intensity-demo" shadow-intensity="0" shadow-softness="0" environment-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D model of a sphere reflecting a forest with varying shadow intensity" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" id="shadow-intensity-demo" shadow-intensity="0" shadow-softness="0" environment-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D model of a sphere reflecting a forest with varying shadow intensity" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
 <script>
 (() => {
   const modelViewer = document.querySelector('#shadow-intensity-demo');
@@ -228,7 +228,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="anotherHDRExample" highlight-as="html">
             <template>
-<model-viewer camera-controls skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of metal spheres at varying degrees of roughness" src="../../shared-assets/models/glTF-Sample-Models/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of metal spheres at varying degrees of roughness" src="../../shared-assets/models/glTF-Sample-Models/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -252,7 +252,7 @@ <h4>Note that if you have multiple &lt;model-viewer&gt; elements
           </div>
           <example-snippet stamp-to="ldrEnvironmentImage" highlight-as="html">
             <template>
-<model-viewer camera-controls skybox-image="../../shared-assets/environments/spruit_sunrise_1k_LDR.jpg" alt="A 3D model of metal spheres at varying degrees of roughness" src="../../shared-assets/models/glTF-Sample-Models/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_LDR.jpg" alt="A 3D model of metal spheres at varying degrees of roughness" src="../../shared-assets/models/glTF-Sample-Models/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -278,7 +278,7 @@ <h4>Environment images should be no more than 1k (1024x512) as they
           </div>
           <example-snippet stamp-to="skyboxAndEnvrionment" highlight-as="html">
             <template>
-<model-viewer camera-controls skybox-image="../../assets/spruit_sunrise_4k_LDR.jpg" environment-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a sphere reflecting a sunrise" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../assets/spruit_sunrise_4k_LDR.jpg" environment-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a sphere reflecting a sunrise" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>