Baie d'Antalaha : diorama 3D animé jour et nuit

index.html · 6.0 Ko

<!DOCTYPE html>
<!--
  La baie d'Antalaha en 3D — Tutoriel Zdog niveau AVANCÉ
  --------------------------------------------------------------------------
  Cas d'usage : l'animation d'accueil d'un site touristique. Un petit
  diorama de la baie d'Antalaha : île et palmiers, mer qui ondule, pirogue
  à balancier, soleil et lune, nuages et oiseaux. Un curseur « heure de la
  journée » change toute l'ambiance : aube, jour, crépuscule, nuit.

  Structure de la page :
    <header> : titre
    <main>   : le canevas (avec le dégradé de ciel en CSS), les commandes
               (heure, ruban du temps, pause…) et le plan du code
    <footer> : bande de vagues décorative

  Le code JavaScript est découpé dans js/ (voir l'ordre des <script> en bas).
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Baie d'Antalaha 3D — Zdog</title>
  <meta name="description" content="Diorama 3D animé de la baie d'Antalaha avec Zdog : mer, palmiers, pirogue, soleil, lune et heure de la journée.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <noscript>
    <p class="noscript">Le diorama 3D a besoin de JavaScript. Activez-le pour voir la baie d'Antalaha s'animer.</p>
  </noscript>

  <header class="entete">
    <h1>La baie d'Antalaha en 3D</h1>
    <p>Un diorama animé : faites-le tourner du doigt et changez l'heure de la journée.</p>
  </header>

  <main>
    <!-- ================= LA SCÈNE =================
         #scene-baie porte le dégradé de ciel (mis à jour par main.js).
         Le canevas est TRANSPARENT : on voit le dégradé derrière la 3D. -->
    <div class="scene" id="scene-baie">
      <canvas id="baie-canvas" class="zdog-canvas" width="360" height="260" role="img"
              aria-label="Diorama 3D de la baie d'Antalaha : une île avec des palmiers, une pirogue à balancier sur une mer qui ondule, le soleil ou la lune et des nuages. Faites glisser pour tourner la vue ; le curseur d'heure change l'ambiance."></canvas>

      <!-- Étiquette flottante : heure, phase de la journée, icône -->
      <div class="badge" aria-live="off">
        <img id="ico-astre" src="medias/soleil.svg" alt="" width="20" height="20">
        <span id="txt-heure" class="badge-heure">9 h 30</span>
        <span id="txt-phase" class="badge-phase">Jour</span>
      </div>
      <!-- Compteur d'images par seconde (outil de mesure des performances) -->
      <div class="fps" id="info-fps" aria-hidden="true"></div>
    </div>

    <!-- ================= COMMANDES ================= -->
    <section class="commandes" aria-label="Commandes du diorama">

      <div class="bloc">
        <label for="ctrl-heure" class="titre-bloc">Heure de la journée</label>
        <!-- Le curseur va de 0 à 24 h ; main.js met à jour sa valeur et son texte parlé -->
        <input type="range" id="ctrl-heure" min="0" max="24" step="0.05" value="9.5">

        <!-- Le ruban du temps : un dégradé qui résume la journée. On peut y
             glisser (Zdog.Dragger, voir main.js). Le repère indique l'heure. -->
        <div class="ruban" id="ruban" aria-hidden="true">
          <div class="ruban-repere" id="ruban-repere"></div>
        </div>
        <div class="ruban-legende" aria-hidden="true">
          <span>0 h</span><span>6 h</span><span>12 h</span><span>18 h</span><span>24 h</span>
        </div>
      </div>

      <div class="bloc">
        <span class="titre-bloc">Animation</span>
        <div class="rangee">
          <!-- Bouton interrupteur : aria-pressed indique s'il est enfoncé -->
          <button type="button" class="bouton" id="btn-pause" aria-pressed="false">
            <img id="ico-pause" src="medias/pause.svg" alt="" width="20" height="20">
            <span id="lib-pause">Pause</span>
          </button>
          <button type="button" class="bouton" id="btn-vue">Vue de départ</button>
        </div>
        <label class="case"><input type="checkbox" id="chk-temps" checked> Le temps s'écoule tout seul</label>
        <label class="case"><input type="checkbox" id="chk-rotation"> Rotation lente de la vue</label>
      </div>
    </section>

    <!-- ================= PLAN DU CODE ================= -->
    <section class="plan" aria-labelledby="t-plan">
      <h2 id="t-plan">Où lire le code ?</h2>
      <ol>
        <li><code>js/config.js</code> : constantes, qualité mobile, outils communs.</li>
        <li><code>js/palette.js</code> : les couleurs selon l'heure (interpolation).</li>
        <li><code>js/mer.js</code> : la mer, une somme de sinus sur des rangées de points.</li>
        <li><code>js/palmier.js</code> : un palmier généré par une fonction (courbes de Bézier).</li>
        <li><code>js/pirogue.js</code> : la pirogue, son balancier, son sillage (pool d'objets).</li>
        <li><code>js/ciel.js</code> : soleil, lune, étoiles, nuages, oiseaux.</li>
        <li><code>js/scene.js</code> : l'assemblage et l'île.</li>
        <li><code>js/main.js</code> : l'illustration, l'interface et la boucle d'animation (deltaTime).</li>
      </ol>
    </section>
  </main>

  <footer class="pied">
    <p>Tutoriel Zdog avancé · Portail Antalaha</p>
  </footer>

  <!-- ================= SCRIPTS (l'ordre est important) =================
       1. zdog.min.js : la bibliothèque (chemin absolu fourni par le portail)
       2. config.js   : crée l'objet global « Baie » et les constantes
       3. palette.js  : couleurs selon l'heure
       4. mer.js, palmier.js, pirogue.js, ciel.js : fabriques d'objets 3D
       5. scene.js    : assemble les fabriques
       6. main.js     : crée l'illustration et lance l'animation -->
  <script src="/libs/zdog.min.js"></script>
  <script src="js/config.js"></script>
  <script src="js/palette.js"></script>
  <script src="js/mer.js"></script>
  <script src="js/palmier.js"></script>
  <script src="js/pirogue.js"></script>
  <script src="js/ciel.js"></script>
  <script src="js/scene.js"></script>
  <script src="js/main.js"></script>
</body>
</html>