Maison 3D pour une agence immobilière

README.md · 3.7 Ko

# Maison 3D pour une agence immobilière (Zdog, niveau intermédiaire)

## Cas d'usage

L'agence fictive « Vanille Immobilier » d'Antalaha présente une **maison** à vendre :
maison à étage, **véranda** couverte, escalier extérieur, toit en tôle et arbres. Le visiteur peut :

- passer d'une **vue de face / de côté / de dessus** avec une animation douce ;
- lancer une **rotation automatique** ou tourner la maison au doigt/à la souris ;
- **zoomer** avec un curseur ;
- **changer la couleur de la façade** (jaune vanille, bleu océan, vert ravenala, rose corail, blanc chaux).

## Arborescence

```
zdog-maison/
├── index.html         Page : canevas, boutons de vue, curseur de zoom, choix de façade
├── site.json          Titre, description et étiquettes pour le portail
├── css/
│   └── style.css      Mise en page mobile d'abord, canevas de hauteur adaptative
├── js/
│   ├── config.js      TOUTES les constantes : dimensions, couleurs, vues de caméra
│   ├── outils.js      Utilitaires : nuancer une couleur, hasard reproductible, fenêtres
│   ├── sol.js         Fabrique du sol : pelouse, terre, ombre, chemin
│   ├── maison.js      Fabrique des murs, ouvertures et du toit à deux pans
│   ├── veranda.js     Fabrique de la véranda (poteaux, garde-corps) et de l'escalier
│   ├── arbre.js       Fabrique d'arbre généré par fonction (hasard reproductible)
│   ├── camera.js      Vues, transitions easeInOut, rotation automatique
│   └── main.js        Assemblage, interface, stockage prudent, boucle d'animation
└── medias/
    └── maison.svg     Icône de l'en-tête (médiathèque libre de droits du portail)
```

Ordre des scripts : `zdog.min.js` → `config` → `outils` → `sol` → `maison` → `veranda` → `arbre` → `camera` → `main`.

## Notions abordées

- Coordonnées de Zdog (x droite, **y bas**, z vers le spectateur), radians et `Zdog.TAU`
- Composer un modèle avec de nombreuses formes : `Box`, `Rect`, `Shape` (path), `Ellipse`, `Cylinder`
- `Anchor` (regrouper et déplacer) et `Group` (ordre de dessin, `updateSort`)
- L'ordre de rendu de Zdog (tri par profondeur) et comment le contrôler (`fixerOrdreSol`, groupes)
- Fonctions **fabriques** : une fonction qui construit un objet 3D et le renvoie
- Boucles `for` pour générer des formes répétitives (barreaux, nervures du toit, feuillage)
- Hasard reproductible (graine) pour un arbre toujours identique
- Changer une couleur sans reconstruire (`box.frontFace = …`, `shape.color = …`)
- Caméra simulée : faire tourner `illo.rotate`, chemin le plus court avec `Zdog.modulo`
- Animation douce : `Zdog.easeInOut`, `Zdog.lerp`, `deltaTime`
- Canevas adaptatif : `resize: true`, `onResize`, `window.devicePixelRatio`, zoom selon la largeur, `clamp()` en CSS
- `localStorage` dans un bac à sable : `try/catch` et solution de repli en mémoire
- Accessibilité : `aria-label`, `aria-pressed`, `aria-live`, étiquettes de curseur, `prefers-reduced-motion`

## Idées d'exercices

1. Ajoutez une couleur de façade (« Terre de Sienne ») dans `Maison.FACADES`.
2. Ajoutez une quatrième vue « arrière » dans `Maison.VUES` et un bouton correspondant.
3. Ajoutez une cheminée (une `Box` sur le toit) ou une lucarne.
4. Changez le nombre de marches dans `config.js` : l'escalier s'adapte-t-il ?
5. Créez un palmier avec la même méthode que l'arbre (tronc incliné + feuilles en `Shape` courbes).
6. Ajoutez un bouton « Jour / Nuit » qui change la couleur du ciel (fond CSS) et assombrit la façade avec `Maison.nuancer`.
7. Remplacez le sol circulaire par un `Rect` carré : que se passe-t-il à l'ordre de dessin ?