demos/three-planet.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>‹three-planet element demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="stylesheet" href="demo-component.css">
  <style>
    .fullbleed { margin: 0; height: 100vh }
    .vflex { display: flex; flex-direction: row }
    .vfill { flex-grow: 1 }
  </style>
</head>
<body class="unresolved vflex fullbleed">
  <noscript>Please enable JavaScript to view this website.</noscript>

  <header>
    <a href="index.html">Catalog</a>
    <span> › Element ‹three-planet›</span>
  </header>

  <main class="vflex vfill">
    <three-app class="vflex vfill" fps="24">
      <three-camera id="camera01" type="perspective" controls="osc orbitter"></three-camera>
      <three-scene id="scene01">
        <three-planet id="earth" animate></three-planet>
      </three-scene>
    </three-app>
  </main>

  <script src="../node_modules/osc-js/lib/osc.min.js"></script>
  <script type="module" src="../node_modules/@petitatelier/three-app/three-app.js"></script>
  <script type="module" src="../node_modules/@petitatelier/three-camera/three-camera.js"></script>
  <script type="module" src="../node_modules/@petitatelier/three-scene/three-scene.js"></script>
  <script type="module" src="../node_modules/@petitatelier/three-planet/three-planet.js"></script>
  <script>
    addEventListener( "load", () => document.body.classList.remove( "unresolved"));
  </script>
</body>
</html>