index.html

<!-- @format -->

<!DOCTYPE html>
<html>
  <head>
    <title>3DTiles examples</title>
    <link rel="stylesheet" href="./style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <section>
    <div id="panel">
      <div id="header">
        <h1>
          <div>3DTiles examples</div>
        </h1>
        <p>3DTiles created with Py3DTilers</p>
      </div>
      <div id="contentWrapper">
        <div id="content">
          <h2>Community</h2>
          <ul>
            <li>
              <a href="https://projet.liris.cnrs.fr/vcity/">VCity project</a>
            </li>
            <li>
              <a href="https://imu.universite-lyon.fr/">Labex IMU</a>
            </li>
            <li>
              <a href="https://liris.cnrs.fr/">Liris</a>
            </li>
          </ul>

          <h2>Code</h2>
          <ul>
            <li><a href="https://github.com/VCityTeam/UD-Demo-vcity-py3dtilers-lyon">Demo</a></li>
            <li><a href="https://github.com/VCityTeam/py3dtilers">Py3DTilers</a></li>
          </ul>
        </div>
      </div>
      <div id="logos">
        <img class="logo" src="./assets/img/logo-imu.png" />
        <img class="logo" src="./assets/img/logo-liris.png" />
      </div>
    </div>
    <div id="viewer">
      <div id="projects">
        <div class="example">
          <a
          href="./html/citygml_colors.html"
          target="_blank"
          rel="noopener"
          >
            <img
              src="./assets/img/citygml_colors.png"
              loading="lazy" class="image__img"
            />
            <div class="image__overlay">
              <div class="image__title">Color by class</div>
              <p class="image__description">
                3DTiles with color based on CityGML classes
              </p>
            </div>
          </a>
        </div>
        <div class="example">
          <a
          href="./html/height_color.html"
          target="_blank"
          rel="noopener"
          >
            <img
              src="./assets/img/height_color.png"
              loading="lazy" class="image__img"
            />
            <div class="image__overlay">
              <div class="image__title">Color by height</div>
              <p class="image__description">
                3DTiles with color based on height
              </p>
            </div>
          </a>
        </div>
        <div class="example">
          <a
          href="./html/textured.html"
          target="_blank"
          rel="noopener"
          >
            <img
              src="./assets/img/textured.png"
              loading="lazy" class="image__img"
            />
            <div class="image__overlay">
              <div class="image__title">Textured</div>
              <p class="image__description">
                3DTiles with texture
              </p>
            </div>
          </a>
        </div>
        <div class="example">
          <a
          href="./html/all_lyon.html"
          target="_blank"
          rel="noopener"
          >
            <img
              src="./assets/img/all_lyon.png"
              loading="lazy" class="image__img"
            />
            <div class="image__overlay">
              <div class="image__title">Lyon</div>
              <p class="image__description">
                3DTiles of all Lyon boroughs
              </p>
            </div>
          </a>
        </div>
        <div class="example">
          <a
          href="./html/all_lyon_lods.html"
          target="_blank"
          rel="noopener"
          >
            <img
              src="./assets/img/all_lyon_lods.png"
              loading="lazy" class="image__img"
            />
            <div class="image__overlay">
              <div class="image__title">Lyon with LoD</div>
              <p class="image__description">
                3DTiles of all Lyon's buildings with levels of detail
              </p>
            </div>
          </a>
        </div>
        <div class="example">
          <a
          href="./html/wide.html"
          target="_blank"
          rel="noopener"
          >
            <img
              src="./assets/img/wide.png"
              loading="lazy" class="image__img"
            />
            <div class="image__overlay">
              <div class="image__title">Rhône</div>
              <p class="image__description">
                3DTiles of Rhône's buildings (+800k buildings)
              </p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </section>
</body>
</html>