← Portefeuille immersif

Partout
dans l'Yonne.

Un réseau d'artisans vérifiés, de Sens à Avallon.

01

Les villes s'allument.

Auxerre, Sens, Joigny, Tonnerre : chaque point est un professionnel disponible.

02

Les demandes circulent.

Une demande part de chez vous et arrive chez le bon artisan, à côté.

03

Le bon pro, près de chez vous.

Décrivez votre projet, on s'occupe du reste.

Réutiliser « Le relief »

Un territoire en 3D survolé par la caméra ; les villes s'allument et se relient à mesure qu'on descend.

Idéal pour : Un service local ou départemental : annuaire, réseau d'artisans, couverture géographique. Pensé pour Les Pros de l'Yonne.

Fichiers
02-relief/scene.js (la mise en scène), 02-relief/index.html (textes), 02-relief/page.css (ajustements), plus le socle src/commun/.
Réglages
  • Territoire : relief-yonne-hauteur.png + relief-yonne-ortho.jpg (emprise dans relief-yonne.json) ; refaire pour un autre département avec assembler.mjs (tuiles d'altitude + WMTS IGN)
  • Villes : tableau VILLES (lat, lon réels) ; liaisons LIAISONS
  • Exagération du relief : EXAGERATION ; tombée de la nuit : soir dans rendre()
Performance
Maillage 256 × 256 + orthophoto 2048² (1,3 Mo) + ombres portées. Mobile : 128 × 128, sans ombres ni bloom.
Sources
Altitudes Mapzen / AWS Terrain Tiles (données ouvertes) ; orthophoto © IGN, BD ORTHO, Licence Ouverte.
Repli
Sans WebGL, sans JavaScript ou avec « réduire les animations » : les mêmes textes et liens, en page statique.
  1. Copier le dossier 02-relief/ et src/commun/ dans le projet cible (Vite + three + gsap + lenis).
  2. Remplacer les textes des quatre étapes dans index.html ; garder les attributs data-*.
  3. Ajuster les réglages ci-dessus dans scene.js ; la progression p va de 0 (haut) à 1 (bas).