examples/animation.html

<!--
/* @license
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>&lt;model-viewer&gt; Animation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no,
  minimum-scale=1.0, maximum-scale=1.0">
  <link type="text/css" href="styles/examples.css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
  <script src="../node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>

  <!-- The following libraries and polyfills are recommended to maximize browser support -->

  <!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
  <script src="../node_modules/intersection-observer/intersection-observer.js"></script>

  <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
  <script src="../node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>

  <!-- 💁 OPTIONAL: Fullscreen polyfill is needed to fully support AR features -->
  <script src="../node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>

  <!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
  <script src="../node_modules/focus-visible/dist/focus-visible.js" defer></script>

  <!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
  <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->

</head>
<body>

  <div class="sample">
    <div id="demo-container-1" class="demo"></div>
    <div class="content">
      <div class="wrapper">
        <a class="lockup" href="../index.html"><div class="icon-button icon-modelviewer-black"></div><h1>examples</h1></a>
        <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">
          <template>
  <model-viewer camera-controls autoplay shadow-intensity="1" src="assets/RobotExpressive.glb" background-color="#622dcf" alt="An animated 3D model of a robot"></model-viewer>
          </template>
        </example-snippet>
      </div>
    </div>
  </div>

  <div class="sample">
    <div id="demo-container-2" 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">
          <template>
  <model-viewer camera-controls autoplay shadow-intensity="1" animation-name="Running" src="assets/RobotExpressive.glb" background-color="#25997c" alt="An animate 3D model of a robot"></model-viewer>
          </template>
        </example-snippet>
      </div>
    </div>
  </div>

  <div class="sample">
    <div id="demo-container-3" 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">
          <template>
  <model-viewer id="paused-change-demo" camera-controls autoplay shadow-intensity="1" animation-name="Running" src="assets/RobotExpressive.glb" background-color="#622dcf" alt="An animated 3D model of a robot"></model-viewer>
  <script>
  (() => {
    const modelViewer = document.querySelector('#paused-change-demo');

    self.setInterval(() => {
      modelViewer.animationName = modelViewer.animationName === 'Running' ?
        'Wave' : 'Running';
    }, 1500.0);
  })();
  </script>
          </template>
        </example-snippet>
      </div>
    </div>
  </div>

  <div class="sample">
    <div id="demo-container-4" 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">
          <template>
  <model-viewer id="xfade-demo" camera-controls shadow-intensity="1" animation-name="Running" src="assets/RobotExpressive.glb" background-color="#25997c" alt="An animated 3D model of a robot"></model-viewer>
  <script>
  (() => {
    const modelViewer = document.querySelector('#xfade-demo');

    self.setInterval(() => {
      modelViewer.animationName = modelViewer.animationName === 'Running' ?
        'Idle' : 'Running';
    }, 1500.0);
  })();
  </script>
          </template>
        </example-snippet>
      </div>
    </div>
  </div>


  <div class="footer">
    <ul>
      <li class="attribution">
        <a href="https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf/RobotExpressive">RobotExpressive</a> by <a href="https://www.patreon.com/quaternius">Tomás Laulhé</a>,
        licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
      </li>
    </ul>
    <div style="margin-top:24px;" class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
    <div><a href="https://github.com/GoogleWebComponents/model-viewer">Github</a> ∙ <a href="https://model-viewer.glitch.me/">Glitch</a> ∙ <a href="https://github.com/GoogleWebComponents/model-viewer/issues">Bug report</a></div>
  </div>

  <script src="./scripts/helpers.js"></script>

  <!-- Documentation-specific dependencies: -->
  <script type="module"
      src="./built/dependencies.js">
  </script>
  <script nomodule
      src="./built/dependencies-legacy.js">
  </script>

  <!-- Loads <model-viewer> only on modern browsers: -->
  <script type="module"
      src="../dist/model-viewer.js">
  </script>

  <!-- Loads <model-viewer> only on old browsers like IE11: -->
  <script nomodule
      src="../dist/model-viewer-legacy.js">
  </script>
</body>
</html>