Fix updated examples (google#1673)

* update names for everything * update names for everything * update lighting and env
zstarpak · Oct 28, 2020 · 5fe3358 · 5fe3358
1 parent e8f09ca
commit 5fe3358
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 198 deletions.
diff --git a/packages/modelviewer.dev/data/docs.json b/packages/modelviewer.dev/data/docs.json
diff --git a/packages/modelviewer.dev/data/examples.json b/packages/modelviewer.dev/data/examples.json
@@ -4,47 +4,47 @@
     "htmlName": "loading",
     "examples": [
       {
-        "htmlId": "demo-container-1",
+        "htmlId": "displayPoster",
         "name": "Display Poster"
       },
       {
-        "htmlId": "demo-container-2",
+        "htmlId": "preload",
         "name": "Preload"
       },
       {
-        "htmlId": "demo-container-3",
+        "htmlId": "customizeLoad",
         "name": "Customize Load"
       },
       {
-        "htmlId": "demo-container-4",
+        "htmlId": "invalidModel",
         "name": "Invalid Model"
       },
       {
-        "htmlId": "demo-container-5",
+        "htmlId": "cyclingPosters",
         "name": "Cycling Posters"
       },
       {
-        "htmlId": "demo-container-6",
+        "htmlId": "gltfModel",
         "name": "glTF Model"
       },
       {
-        "htmlId": "demo-container-7",
+        "htmlId": "glbModel",
         "name": "GLB Model"
       },
       {
-        "htmlId": "demo-container-8",
+        "htmlId": "dracoSupport",
         "name": "DRACO Support"
       },
       {
-        "htmlId": "demo-container-9",
+        "htmlId": "usdzModel",
         "name": "USDZ Model"
       },
       {
-        "htmlId": "demo-container-10",
+        "htmlId": "noModel",
         "name": "No Model"
       },
       {
-        "htmlId": "demo-container-11",
+        "htmlId": "cyclingModels",
         "name": "Cycling Models"
       }
     ]
@@ -54,23 +54,23 @@
     "htmlName": "augmentedreality",
     "examples": [
       {
-        "htmlId": "demo-container-1",
+        "htmlId": "webXR",
         "name": "WebXR"
       },
       {
-        "htmlId": "demo-container-2",
+        "htmlId": "ar",
         "name": "AR"
       },
       {
-        "htmlId": "demo-container-3",
+        "htmlId": "sceneViewer",
         "name": "Scene Viewer"
       },
       {
-        "htmlId": "demo-container-4",
+        "htmlId": "customButton",
         "name": "Custom Button"
       },
       {
-        "htmlId": "demo-container-5",
+        "htmlId": "transparentBackground",
         "name": "Transparent Background"
       }
     ]
@@ -80,32 +80,32 @@
     "htmlName": "stagingandcameras",
     "examples": [
       {
-        "htmlId": "demo-container-1",
+        "htmlId": "enableInteraction",
         "name": "Enable Interaction"
       },
       {
-        "htmlId": "demo-container-2",
+        "htmlId": "cameraOrbit",
         "name": "Camera Orbit"
       },
       {
-        "htmlId": "demo-container-3",
+        "htmlId": "orbitAndScroll",
         "name": "Orbit and Scroll"
       },
       {
-        "htmlId": "demo-container-4",
+        "htmlId": "interpolation",
         "name": "Interpolation"
       },
       {
-        "htmlId": "demo-container-5",
+        "htmlId": "defaultTarget",
         "name": "Default Target"
       },
       {
-        "htmlId": "demo-container-6",
+        "htmlId": "cameraTarget",
         "name": "Camera Target"
       },
       {
-        "htmlId": "demo-container-7",
-        "name": "Other Interactions"
+        "htmlId": "panning",
+        "name": "Panning"
       }
     ]
   },
@@ -114,7 +114,7 @@
     "htmlName": "annotations",
     "examples": [
       {
-        "htmlId": "demo-container-1",
+        "htmlId": "addHotspots",
         "name": "Add Hotspots"
       }
     ]
@@ -124,40 +124,40 @@
     "htmlName": "lightingandenv",
     "examples": [
       {
-        "htmlId": "demo-container-1",
+        "htmlId": "hdrSkyboyImage",
         "name": "HDR skybox-image"
       },
       {
-        "htmlId": "demo-container-2",
+        "htmlId": "litModel",
         "name": "Lit Model"
       },
       {
-        "htmlId": "demo-container-3",
+        "htmlId": "unlitModel",
         "name": "Unlit Model"
       },
       {
-        "htmlId": "demo-container-4",
+        "htmlId": "environmentLighting",
         "name": "Environment Lighting"
       },
       {
-        "htmlId": "demo-container-5",
-        "name": "Skybox and Environment"
-      },
-      {
-        "htmlId": "demo-container-6",
+        "htmlId": "renderExposure",
         "name": "Render Exposure"
       },
       {
-        "htmlId": "demo-container-7",
+        "htmlId": "shadows",
         "name": "Shadows"
       },
       {
-        "htmlId": "demo-container-8",
-        "name": "Another HDR Examples"
+        "htmlId": "anotherHDRExample",
+        "name": "Another HDR Example"
       },
       {
-        "htmlId": "demo-container-9",
+        "htmlId": "ldrEnvironmentImage",
         "name": "LDR environment-image"
+      },
+      {
+        "htmlId": "skyboxAndEnvrionment",
+        "name": "Skybox and Environment"
       }
     ]
   },
@@ -166,19 +166,19 @@
     "htmlName": "animation",
     "examples": [
       {
-        "htmlId": "demo-container-1",
+        "htmlId": "autoplay",
         "name": "Autoplay"
       },
       {
-        "htmlId": "demo-container-2",
+        "htmlId": "selectingAnimations",
         "name": "Selecting Animations"
       },
       {
-        "htmlId": "demo-container-3",
+        "htmlId": "crossFade",
         "name": "Crossfade"
       },
       {
-        "htmlId": "demo-container-4",
+        "htmlId": "paused",
         "name": "Paused"
       }
     ]
@@ -188,27 +188,27 @@
     "htmlName": "scenegraph",
     "examples": [
       {
-        "htmlId": "demo-container-1",
+        "htmlId": "changeColor",
         "name": "Change Color"
       },
       {
-        "htmlId": "demo-container-2",
+        "htmlId": "changeMaterial",
         "name": "Change Material"
       },
       {
-        "htmlId": "demo-container-3",
+        "htmlId": "swapTextures",
         "name": "Swap Textures"
       },
       {
-        "htmlId": "demo-container-4",
+        "htmlId": "swapTextures2",
         "name": "Swap Textures 2"
       },
       {
-        "htmlId": "demo-container-5",
+        "htmlId": "exporter",
         "name": "Exporter"
       },
       {
-        "htmlId": "demo-container-6",
+        "htmlId": "exporterWithOptions",
         "name": "Exporter w/ Options"
       }
     ]

diff --git a/packages/modelviewer.dev/examples/animation/index.html b/packages/modelviewer.dev/examples/animation/index.html
@@ -48,15 +48,15 @@
 
   <div class="examples-container">
     <div class="sample">
-      <div id="demo-container-1" class="demo"></div>
+      <div id="autoplay" class="demo"></div>
       <div class="content">
         <div class="wrapper">
           <h4 id="intro"><span class="font-medium">Animation. </span>Use &lt;model-viewer&gt; to show off your animated models. This page showcases how you can control models with animations</h4>
           <div class="heading">
             <h2 class="demo-title">Automatically play animations with the autoplay attribute</h2>
             <h4></h4>
           </div>
-          <example-snippet stamp-to="demo-container-1" highlight-as="html">
+          <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>
             </template>
@@ -66,14 +66,14 @@ <h4></h4>
     </div>
 
     <div class="sample">
-      <div id="demo-container-2" class="demo"></div>
+      <div id="selectingAnimations" class="demo"></div>
       <div class="content">
         <div class="wrapper">
           <div class="heading">
             <h2 class="demo-title">Select a specific animation with animation-name</h2>
             <h4></h4>
           </div>
-          <example-snippet stamp-to="demo-container-2" highlight-as="html">
+          <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>
             </template>
@@ -83,14 +83,14 @@ <h4></h4>
     </div>
 
     <div class="sample">
-      <div id="demo-container-3" class="demo"></div>
+      <div id="crossFade" class="demo"></div>
       <div class="content">
         <div class="wrapper">
           <div class="heading">
             <h2 class="demo-title">Animations crossfade when you change them</h2>
             <h4></h4>
           </div>
-          <example-snippet stamp-to="demo-container-3" highlight-as="html">
+          <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>
 <script>
@@ -110,14 +110,14 @@ <h4></h4>
     </div>
 
     <div class="sample">
-      <div id="demo-container-4" class="demo"></div>
+      <div id="paused" class="demo"></div>
       <div class="content">
         <div class="wrapper">
           <div class="heading">
             <h2 class="demo-title">A paused model shows the first frame of the configured animation</h2>
             <h4></h4>
           </div>
-          <example-snippet stamp-to="demo-container-4" highlight-as="html">
+          <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>
 <script>

diff --git a/packages/modelviewer.dev/examples/annotations/index.html b/packages/modelviewer.dev/examples/annotations/index.html
@@ -48,7 +48,7 @@
   <div id="toggle"></div>
   <div class="examples-container">
     <div class="sample">
-      <div id="demo-container-1" class="demo"></div>
+      <div id="addHotspots" class="demo"></div>
       <div class="content">
         <div class="wrapper">
           <h4 id="intro"><span class="font-medium">Annotations. </span></h4>
@@ -74,7 +74,7 @@ <h4 id="intro"><span class="font-medium">Annotations. </span></h4>
             <h2 class="demo-title">Add hotspots</h2>
             <h4></h4>
           </div>
-          <example-snippet stamp-to="demo-container-1" highlight-as="html">
+          <example-snippet stamp-to="addHotspots" highlight-as="html">
             <template>
 <style>
   button{