◆ Portail Antalaha

Annuaire › Code ouvert

Maison 3D pour une agence immobilière

tutorial · Voir le site ↗
Connectez-vous pour copier ce site

Code publié par son auteur, en lecture seule. « Copier dans mon espace » crée un nouveau site à vous (non publié) que vous pouvez modifier librement.

js/config.js · 4.2 Ko

/* ==========================================================================
 * js/config.js — CONSTANTES RÉGLABLES DE LA MAISON CRÉOLE
 * --------------------------------------------------------------------------
 * Toutes les dimensions, couleurs et vues de caméra sont regroupées ici.
 * Changez un nombre, rechargez la page : la maison change !
 *
 * RAPPEL DU SYSTÈME DE COORDONNÉES DE ZDOG
 *   x : vers la droite
 *   y : vers le BAS (donc « monter » = diminuer y, valeurs NÉGATIVES)
 *   z : vers le spectateur (z positif = plus près de nous)
 *   Les rotations sont en radians ; Zdog.TAU = un tour complet (≈ 6,283).
 *
 * Dans ce projet, le SOL est à y = 0. Tout ce qui est « en l'air » a donc un
 * y négatif. Par exemple le toit est vers y = -135.
 *
 * Tout est rangé dans l'espace de noms global « Maison » (pas de modules ES).
 * ========================================================================== */

window.Maison = window.Maison || {};

(function () {
  'use strict';

  var TAU = Zdog.TAU;

  // ---- Dimensions de la maison (unités Zdog, sans rapport avec les pixels) --
  Maison.DIM = {
    largeur: 120,          // taille sur l'axe x (la façade)
    profondeur: 80,        // taille sur l'axe z (de l'arrière à l'avant)
    soubassement: 6,       // petit socle en pierre sous la maison
    hauteurRez: 46,        // hauteur du rez-de-chaussée
    hauteurEtage: 47,      // hauteur de l'étage
    profondeurEtage: 54,   // l'étage est moins profond : le reste est la véranda
    epaisseurDalle: 3,     // plancher de la véranda
    hauteurToit: 37,       // hauteur entre les bords du toit et le faîtage
    debordToit: 4,         // le toit dépasse des murs de 4 unités (protège de la pluie)
    escalierX: 36,         // position (axe x) de l'escalier
    escalierLargeur: 22,   // largeur de l'escalier
    escalierMarches: 6,    // nombre de marches
    escalierProfondeurMarche: 7,
  };

  // ---- Couleurs fixes ------------------------------------------------------
  Maison.COULEURS = {
    pierre: '#9a9488',         // soubassement
    bois: '#8a5a2b',           // poteaux, garde-corps
    boisClair: '#b98652',      // marches
    boisFonce: '#5c3a1a',      // cadres de fenêtres, portes
    vitre: '#8fc4de',
    volets: '#2f7d6b',         // volets verts
    toit: '#b5472f',           // tôle rouge
    toitArriere: '#9c3b27',    // versant arrière, un peu plus sombre
    faitage: '#6e2a1c',
    herbe: '#8fcf6b',
    terre: '#a9794a',
    sable: '#e6d3a3',
    tronc: '#6b4423',
    feuillage: ['#2f8f4e', '#3aa65c', '#277a42', '#4cb86a'],
    fleur: '#e8452c',          // fleurs de flamboyant
  };

  // ---- Choix de couleur de façade ------------------------------------------
  // `mur` est la couleur de base ; les autres faces sont calculées (plus
  // sombres ou plus claires) dans js/outils.js pour donner du relief.
  Maison.FACADES = {
    vanille: { nom: 'Jaune vanille', mur: '#f2d27a' },
    ocean:   { nom: 'Bleu océan',    mur: '#7fb9d6' },
    ravenala:{ nom: 'Vert ravenala', mur: '#9bcb8e' },
    corail:  { nom: 'Rose corail',   mur: '#f2a592' },
    chaux:   { nom: 'Blanc chaux',   mur: '#f3efe6' },
  };

  // ---- Vues de caméra ------------------------------------------------------
  // On fait tourner TOUTE la scène (l'illustration) :
  //   x = inclinaison (négatif = on regarde un peu depuis le dessus)
  //   y = rotation autour de l'axe vertical (-TAU/4 = on voit le côté droit)
  Maison.VUES = {
    face:   { nom: 'face',   x: -0.12,      y: 0 },
    cote:   { nom: 'côté',   x: -0.12,      y: -TAU / 4 },
    dessus: { nom: 'dessus', x: -1.4,       y: 0 },
  };
  // Vue de départ (3/4) et inclinaison pendant la rotation automatique.
  Maison.VUE_DEPART = { x: -0.3, y: -0.7 };
  Maison.INCLINAISON_AUTO = -0.3;

  // ---- Réglages de la caméra et de l'écran ---------------------------------
  Maison.CAMERA = {
    dureeTransition: 1.1,    // secondes pour passer d'une vue à l'autre
    vitesseAuto: 0.35,       // radians par seconde en rotation automatique
    largeurScene: 300,       // largeur « logique » à faire tenir dans le canevas
    hauteurScene: 280,       // hauteur « logique »
    decalageVertical: 62,    // on descend la scène pour centrer la maison
  };
})();