Maison 3D pour une agence immobilière

index.html · 4.0 Ko

<!DOCTYPE html>
<!--
  Maison 3D — Tutoriel Zdog niveau INTERMÉDIAIRE
  --------------------------------------------------------------------------
  Cas d'usage : une agence immobilière d'Antalaha présente une maison
  à vendre. Le visiteur peut changer de vue (face / côté / dessus), zoomer,
  tourner la maison au doigt ou à la souris et essayer plusieurs couleurs
  de façade.

  Structure :  <header> titre · <main> canevas + commandes · <footer> notes
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maison 3D — Zdog</title>
  <meta name="description" content="Présentation 3D interactive d'une maison avec Zdog.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <noscript>
    <p class="noscript">La présentation 3D a besoin de JavaScript. Activez-le pour visiter la maison.</p>
  </noscript>

  <header class="entete">
    <img src="medias/maison.svg" alt="" width="32" height="32">
    <div>
      <h1>Maison à Antalaha</h1>
      <p class="sous-titre">Agence Vanille Immobilier · maison à étage avec véranda</p>
    </div>
  </header>

  <main>
    <!-- ================= LE CANEVAS 3D ================= -->
    <!-- .scene donne sa taille au canevas (voir style.css) ; Zdog la mesure. -->
    <div class="scene">
      <canvas id="maison-canvas" class="zdog-canvas" width="320" height="300" role="img"
              aria-label="Maquette 3D d'une maison à étage avec véranda, escalier extérieur et deux arbres. Faites glisser pour la tourner, ou utilisez les boutons de vue."></canvas>
    </div>
    <!-- aria-live : les lecteurs d'écran annoncent le changement de vue -->
    <p id="info-vue" class="info" aria-live="polite">Affichage : vue libre</p>

    <!-- ================= COMMANDES ================= -->
    <section class="commandes" aria-label="Commandes de la visite">

      <fieldset>
        <legend>Point de vue</legend>
        <div class="rangee">
          <button type="button" class="bouton" id="btn-face">Vue de face</button>
          <button type="button" class="bouton" id="btn-cote">Vue de côté</button>
          <button type="button" class="bouton" id="btn-dessus">Vue de dessus</button>
          <!-- aria-pressed : bouton « interrupteur » (enfoncé ou non) -->
          <button type="button" class="bouton" id="btn-auto" aria-pressed="false">Rotation auto</button>
        </div>
      </fieldset>

      <fieldset>
        <legend>Zoom</legend>
        <div class="rangee">
          <label for="ctrl-zoom" class="visuel-cache">Niveau de zoom</label>
          <input type="range" id="ctrl-zoom" min="0.6" max="2" step="0.05" value="1">
          <output id="txt-zoom" for="ctrl-zoom">100 %</output>
        </div>
      </fieldset>

      <fieldset>
        <legend>Couleur de la façade</legend>
        <!-- Les boutons sont créés par js/main.js à partir de Maison.FACADES -->
        <div class="rangee" id="choix-facade"></div>
      </fieldset>
    </section>

    <p id="info-dpr" class="info"></p>
  </main>

  <footer class="pied">
    <p>Tutoriel Zdog intermédiaire · Portail Antalaha. Lisez le code dans
       <code>js/</code> : un fichier par objet 3D (maison, véranda, arbre, sol) et un fichier pour la caméra.</p>
  </footer>

  <!-- ================= SCRIPTS (ordre important) =================
       Chaque fichier s'appuie sur les précédents :
       config  -> constantes et couleurs
       outils  -> fonctions utilitaires (couleurs, hasard, fenêtres)
       sol / maison / veranda / arbre -> fabriques d'objets 3D
       camera  -> vues et transitions
       main    -> assemblage et boucle d'animation -->
  <script src="/libs/zdog.min.js"></script>
  <script src="js/config.js"></script>
  <script src="js/outils.js"></script>
  <script src="js/sol.js"></script>
  <script src="js/maison.js"></script>
  <script src="js/veranda.js"></script>
  <script src="js/arbre.js"></script>
  <script src="js/camera.js"></script>
  <script src="js/main.js"></script>
</body>
</html>