examples/sources.html

<!--
/*
 * 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; - Sources</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" />


  <!-- The following libraries and polyfills are recommended to maximize browser support -->
  <!-- Include prismatic.js for Magic Leap support: -->
  <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->

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

  <!-- Intersection Observer polyfill is required for Safari and IE11 -->
  <script src="../node_modules/intersection-observer/intersection-observer.js"></script>

  <!-- Resize Observer polyfill is required for non-Chrome browsers: -->
  <script src="../node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>

  <!-- Fullscreen polyfill is required for using experimental AR features in Canary: -->
  <script src="../node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>
</head>
<body>
    <div id="container">
        <h1>&lt;model-viewer&gt; - Sources</h1>
        <div class="desc">
            <p>This page tests configurations of the model source.</p>
        </div>

        <demo-snippet>
            <h2>With glTF model</h2>
            <template>
                <model-viewer
                    background-color="#db3236"
                    src="assets/cube.gltf">
                </model-viewer>
            </template>
        </demo-snippet>

        <demo-snippet>
            <h2>With glb model</h2>
            <template>
                <model-viewer
                    background-color="#f4c20d"
                    src="assets/Astronaut.glb">
                </model-viewer>
            </template>
        </demo-snippet>

        <demo-snippet>
            <h2>With only a USDZ model</h2>
            <template>
                <model-viewer
                    background-color="#3cba54"
                    ios-src="assets/Astronaut.usdz">
                </model-viewer>
            </template>
        </demo-snippet>

        <demo-snippet>
            <h2>With no model</h2>
            <template>
                <model-viewer
                    background-color="#4885ed"
                    src="i-do-not-exist.glb">
                </model-viewer>
            </template>
        </demo-snippet>

        <demo-snippet>
            <h2>Cycling different models</h2>
            <template>
                <model-viewer id="toggle-model" src="assets/shishkebab.glb" background-color="#db3236" controls auto-rotate></model-viewer>
                <script>
                    const models = ['shishkebab.glb', 'Astronaut.glb'];
                    let i = 0;
                    setInterval(() => $('#toggle-model').setAttribute('src', `assets/${models[i++ % 2]}`), 2000);
                </script>
            </template>
        </demo-snippet>

        <div class="attribution">
          Astronaut by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
          licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>
          (<a href="https://poly.google.com/view/dLHpzNdygsg">source</a>)
        </div>
    </div>
    <script src="./scripts/helpers.js"></script>
    <script src="./built/dependencies.js"></script>
    <script src="../dist/model-viewer.js"></script>
</body>
</html>