Maison 3D pour une agence immobilière

js/veranda.js · 6.3 Ko

/* ==========================================================================
 * js/veranda.js — LA VÉRANDA ET L'ESCALIER
 * --------------------------------------------------------------------------
 * La véranda est la grande galerie couverte de l'étage, à l'avant de la
 * maison. On y monte par un
 * escalier extérieur.
 *
 * Deux fonctions fabriques :
 *   - Maison.creerVeranda() : plancher, poteaux, garde-corps à barreaux ;
 *   - Maison.creerEscalier() : des marches (des boîtes de plus en plus hautes).
 *
 * Dépend de : Zdog, Maison.DIM, Maison.COULEURS (config.js).
 * ========================================================================== */

(function () {
  'use strict';

  /**
   * Construit la véranda de l'étage.
   * @param {Zdog.Anchor} parent Où l'accrocher (le groupe de la maison).
   */
  function creerVeranda(parent) {
    var D = Maison.DIM;
    var C = Maison.COULEURS;

    var yPlancher = -(D.soubassement + D.hauteurRez);               // -52 : haut du rez-de-chaussée
    var yDessusDalle = yPlancher - D.epaisseurDalle;                // -55 : on marche ici
    var yToit = -(D.soubassement + D.hauteurRez + D.hauteurEtage) + 1; // -98 : bord bas du toit
    var zArriereVeranda = -D.profondeur / 2 + D.profondeurEtage;   // +14 : contre la façade de l'étage
    var zAvant = D.profondeur / 2;                                  // +40
    var zGardeCorps = zAvant - 2;                                   // +38 : garde-corps un peu en retrait
    var profondeurVeranda = zAvant - zArriereVeranda;               // 26

    // 1) LE PLANCHER : une dalle mince en bois clair.
    new Zdog.Box({
      addTo: parent,
      width: D.largeur + 2,
      height: D.epaisseurDalle,
      depth: profondeurVeranda + 2,
      translate: { y: yPlancher - D.epaisseurDalle / 2, z: (zArriereVeranda + zAvant) / 2 },
      stroke: 1,
      color: C.bois,
      topFace: C.boisClair,
    });

    // 2) LES POTEAUX : des traits verticaux épais, du plancher jusqu'au toit.
    //    L'escalier laisse une ouverture dans le garde-corps :
    //    elle va de xOuvertureDebut à xOuvertureFin.
    var xOuvertureDebut = D.escalierX - D.escalierLargeur / 2;
    var xOuvertureFin = D.escalierX + D.escalierLargeur / 2;
    var xPoteaux = [-58, -20, xOuvertureDebut, xOuvertureFin, 58];

    xPoteaux.forEach(function (x) {
      new Zdog.Shape({
        addTo: parent,
        path: [{ y: yDessusDalle }, { y: yToit }],   // de bas en haut
        closed: false,
        stroke: 4,
        color: C.bois,
        translate: { x: x, z: zGardeCorps },
      });
    });

    // 3) LES LISSES : les barres horizontales du garde-corps, en deux morceaux
    //    (à gauche de l'escalier, puis à droite). Deux hauteurs : haute et basse.
    var yLisseHaute = yDessusDalle - 14;
    var yLisseBasse = yDessusDalle - 3;
    [[-58, xOuvertureDebut], [xOuvertureFin, 58]].forEach(function (troncon) {
      [yLisseHaute, yLisseBasse].forEach(function (y) {
        new Zdog.Shape({
          addTo: parent,
          path: [{ x: troncon[0], y: y }, { x: troncon[1], y: y }],
          closed: false,
          stroke: 2.5,
          color: C.bois,
          translate: { z: zGardeCorps },
        });
      });
    });

    // 4) LES BARREAUX : de petits traits verticaux tous les 6 unités.
    //    On saute ceux qui tomberaient dans l'ouverture de l'escalier.
    for (var x = -54; x <= 54; x += 6) {
      if (x > xOuvertureDebut && x < xOuvertureFin) { continue; }
      new Zdog.Shape({
        addTo: parent,
        path: [{ y: yLisseBasse }, { y: yLisseHaute }],
        closed: false,
        stroke: 1.2,
        color: C.boisClair,
        translate: { x: x, z: zGardeCorps },
      });
    }

    // 5) LES GARDE-CORPS LATÉRAUX : une lisse haute à chaque extrémité,
    //    qui va du mur de l'étage (z = +14) jusqu'au poteau d'angle (z = +38).
    [-58, 58].forEach(function (x) {
      [yLisseHaute, yLisseBasse].forEach(function (y) {
        new Zdog.Shape({
          addTo: parent,
          path: [{ y: y, z: zArriereVeranda }, { y: y, z: zGardeCorps }],
          closed: false,
          stroke: 2.5,
          color: C.bois,
          translate: { x: x },
        });
      });
    });
  }

  /**
   * Construit l'escalier extérieur qui monte du sol à la véranda.
   *
   * Idée : chaque marche est une Box. Plus on s'approche de la maison,
   * plus la boîte est HAUTE (elle va toujours jusqu'au sol). La marche du
   * haut touche la façade (z = +40) à la hauteur de la véranda.
   *
   * @param {Zdog.Anchor} parent Où l'accrocher (le groupe de la maison).
   */
  function creerEscalier(parent) {
    var D = Maison.DIM;
    var C = Maison.COULEURS;

    var hauteurTotale = D.soubassement + D.hauteurRez + D.epaisseurDalle; // 55
    var n = D.escalierMarches;
    var contremarche = hauteurTotale / n;       // hauteur gagnée à chaque marche
    var zFacade = D.profondeur / 2;             // +40 : devant le mur du rez-de-chaussée

    // j = 1 : première marche (en bas, loin de la maison)
    // j = n : dernière marche (en haut, contre la maison)
    for (var j = 1; j <= n; j++) {
      var hauteur = j * contremarche;                              // hauteur de la boîte
      var zCentre = zFacade + D.escalierProfondeurMarche * (n - j) + D.escalierProfondeurMarche / 2;

      new Zdog.Box({
        addTo: parent,
        width: D.escalierLargeur,
        height: hauteur,
        depth: D.escalierProfondeurMarche,
        translate: { x: D.escalierX, y: -hauteur / 2, z: zCentre },  // posée sur le sol
        stroke: 1,
        color: C.bois,
        topFace: C.boisClair,
      });
    }

    // Les rampes : un trait incliné de chaque côté, du bas jusqu'à la véranda.
    // Les poteaux de départ sont à gauche et à droite de l'escalier.
    var zBas = zFacade + D.escalierProfondeurMarche * (n - 1);     // début de la dernière marche en bas
    [-1, 1].forEach(function (cote) {
      new Zdog.Shape({
        addTo: parent,
        path: [
          { y: -hauteurTotale - 12, z: zFacade - 2 },            // en haut, au niveau du garde-corps
          { y: -contremarche - 12, z: zBas + D.escalierProfondeurMarche }, // en bas
        ],
        closed: false,
        stroke: 2.5,
        color: C.bois,
        translate: { x: D.escalierX + cote * (D.escalierLargeur / 2) },
      });
    });
  }

  Maison.creerVeranda = creerVeranda;
  Maison.creerEscalier = creerEscalier;
})();