project· livré
Murdeau · Présentation 3D au scroll
Horiot Studio a créé pour Murdeau une page qui monte l'installation pièce par pièce en 3D au fil du scroll, jusqu'au trop-plein automatique, en ligne depuis 2026.
- scène 3D continue
- 1
- hauteurs de colonne
- 6
- pièces modélisées
- 4
Contexte
Un produit qui s’explique mal en photo : des pièces qui s’emboîtent, de l’eau qui trouve son niveau seule et un surplus qui repart sans pompe.
Murdeau tient en trois pièces : un socle de 100 L, un réservoir de 500 L et un réservoir de 250 L. La page produit en donne toutes les cotes, mais le visiteur doit encore imaginer le montage, et surtout ce qui se passe quand il pleut : les réservoirs communiquent, le niveau monte partout à la même hauteur, et le surplus repart dans la descente.
La page Découvrir montre tout cela au lieu de le décrire. Une seule scène 3D, la même installation du début à la fin, qui se construit et se remplit au fil du scroll.
La page, acte par acte
Le socle, puis l’emboîtement, les hauteurs possibles, le mur complet, le collecteur et la pluie : chaque étape du scroll ajoute une pièce ou une idée.
Le socle arrive seul, ses cotes se tracent le long de traits bleus (1,21 m, 41 cm, 24 cm). Le 500 L s’emboîte dessus, le 250 L coiffe la colonne : 850 L sur 2,07 m. Six colonnes se rangent ensuite côte à côte, de 350 L sur 0,85 m à 1 600 L sur 3,90 m, avant que le mur s’allonge à cinq colonnes, 4 250 L sur 6,05 m.
Puis la lumière baisse, la caméra s’approche du collecteur posé sur la descente de gouttière. La poignée verte fait un demi-tour, la cartouche sort et montre son tamis inox, maille 1 mm, puis rentre. La pluie commence : les feuilles continuent dans la descente, l’eau propre part vers le réservoir.
Le moment fort : le trop-plein
La première idée laissait pencher l’installation. Elle a cédé la place au trop-plein, qui répond à une vraie question d’acheteur : et quand c’est plein ?
Une seule colonne reçoit l’eau, et pourtant le niveau monte partout à la même hauteur. Il s’arrête juste sous la sortie du collecteur. Au-delà, la pluie continue simplement dans la descente : la conduite est ouverte en coupe et des reflets y défilent dans le sens de l’écoulement, du toit vers le réservoir tant qu’il se remplit, puis vers le pied de la descente une fois plein.
Les modèles 3D
Le collecteur a été modélisé dans Blender d’après la fiche du fabricant, avec une cartouche mobile : la page rejoue le vrai geste d’entretien.
Les modules sont des modèles légers, de 50 à 230 Ko chacun, teintés dans le beige RAL 1015 de la gamme. Les trois pièces ont aussi été reconstruites dans Blender d’après les cotes publiées par Murdeau.
Le collecteur 3P suit la fiche du fabricant : 260 × 270 × 134 mm, sorties de 75, 50 et 32 mm. Corps, adaptateurs, réducteur et cartouche sont des pièces séparées. La poignée et le panier filtrant tournent et sortent ensemble, sur un pivot commun.
Sous le capot
Une route Next.js avec React Three Fiber, une scène pilotée par le scroll, et un texte lisible sans 3D pour les moteurs et les visiteurs pressés.
Le site tournait déjà avec React et un défilement doux : la page reste une route Next.js, avec React Three Fiber, plutôt qu’un second moteur de scroll qui se battrait avec le premier. La progression du scroll est lue une fois par image et pilote toute la chronologie, testée à part.
Sous l’histoire, un récapitulatif statique, rendu côté serveur, reprend les quatre pièces et leurs chiffres, six arguments déjà publiés sur le site, et le bouton « Composer mon Murdeau ». Avec les animations réduites, les reflets restent immobiles et le trop-plein apparaît d’un coup. La page est le premier lien du menu de murdeau.bzh.