Configurateur 3D camion et grue pour Sérignac Centre.

01Le contexte Sérignac Centre

Sérignac Centre vend et loue du matériel de manutention en Bourgogne. Cœur d'activité : la combinaison camion porteur + matériel embarqué (grues auxiliaires, bennes, plateaux). Un client final n'achète pas un produit unique mais un ensemble configuré selon ses contraintes de charge utile, de gabarit et de budget.

Historiquement, la vente passe par un aller-retour entre le prospect et le commercial : appel, demande de configuration précise, réponse manuelle, envoi d'un devis papier, ajustement, relance. Le cycle prend plusieurs jours et coûte du temps commercial pour des demandes qui n'aboutissent pas toutes.

02Le problème métier à résoudre

Trois frictions concrètes :

• Le prospect a du mal à se projeter. Un porteur trois essieux avec grue arrière et benne basculante, ça ne se visualise pas depuis une fiche produit texte.
• Le devis prend du temps à produire manuellement, avec risque d'oubli d'options ou d'erreur de tarif.
• Le commercial passe une part importante de son temps sur des configurations qui ne se signent pas.

Le brief tenait en une phrase : donner au prospect un outil web où il compose son ensemble, le voit en 3D, obtient un devis PDF, et le commercial reprend la main uniquement sur les demandes qualifiées.

03La solution livrée

Application web accessible sur navigateur desktop, sans installation. Trois zones fonctionnelles :

Panneau de composition (colonne gauche)

Choix du porteur de base parmi trois modèles (deux essieux, trois essieux, tracteur), puis sélection dans cinq catégories de matériels combinables : grues auxiliaires, bennes basculantes, plateaux ridelles, hayons élévateurs, options diverses. Chaque sélection met à jour instantanément le prix courant et la charge utile résiduelle.

Rendu 3D interactif (colonne centrale)

Vue 3D temps réel du camion avec le matériel monté. Rotation à la souris, zoom, changement d'angle. Le rendu se met à jour automatiquement à chaque changement de composition.

Génération de devis PDF (bouton final)

Un clic génère un PDF prêt à envoyer contenant : récapitulatif de la composition, illustration de l'ensemble, prix détaillé par ligne, prix total, coordonnées Sérignac. Le prospect le télécharge ou le reçoit par email.

Version mobile avec gate

Sur téléphone, l'expérience 3D complète est dégradée pour éviter les problèmes de performance sur bas de gamme. Une gate d'invitation propose de continuer la configuration sur ordinateur, avec envoi d'un lien de reprise par email.

04Stack et choix techniques

• Next.js comme framework applicatif, App Router, hébergement Vercel Edge.
• React Three Fiber (wrapper React de Three.js) pour le rendu 3D interactif. Modèles GLB optimisés côté build, lazy loading par catégorie.
• Drei pour les helpers 3D (contrôles orbite, éclairage HDRI, ombres).
• Génération PDF côté navigateur avec React-PDF pour éviter tout aller-retour serveur, aucun coût d'infrastructure additionnel.
• Tailwind CSS pour l'UI, avec système de tokens design partagés avec le site Sérignac.
• Formulaire de reprise mobile envoyé via Resend, sans base de données pour la démo.

Un point d'arbitrage important : le rendu 3D est fait côté client pour rester réactif et gratuit à héberger. Le compromis est un temps de premier chargement plus long (les modèles doivent être téléchargés), atténué par du preload agressif sur les modèles les plus fréquents.

05Résultat et démo publique

L'application est actuellement en démo publique à l'adresse serignac-configurateur-demo.vercel.app. Elle sert de preuve de concept avant la version commerciale intégrée au parcours d'achat Sérignac. Pas encore de retours chiffrés en conditions réelles à partager honnêtement, la démo est destinée à valider l'UX et le rendu 3D avant industrialisation.

Ce qui est déjà mesurable :

• Score Lighthouse 95+ sur desktop malgré la 3D (grâce au code splitting et au lazy loading).
• Temps de génération du PDF inférieur à une seconde côté navigateur.
• Zéro coût serveur additionnel par utilisation, l'infrastructure est entièrement Edge.
• Une composition complète configurable en moins de deux minutes chrono par un utilisateur novice.

06Ce qu'on retient de ce projet

Trois enseignements applicables à d'autres configurateurs métier :

La 3D côté navigateur est mature

React Three Fiber permet aujourd'hui un rendu propre sur du matériel grand public, à condition d'optimiser les modèles (compression Draco, textures WebP, LOD progressif). Ce qui aurait nécessité un plugin propriétaire il y a cinq ans tient dans un bundle JavaScript raisonnable.

Le PDF côté client change l'équation économique

Générer le devis dans le navigateur du prospect (React-PDF) supprime tout coût de service PDF distant, tout timeout et tout risque de fuite de données. C'est particulièrement pertinent pour des configurateurs à volume potentiellement élevé.

Séparer démo publique et version commerciale

La démo permet de valider l'UX avec de vrais prospects et de récolter leurs commentaires avant d'engager le développement de la version commerciale complète (auth, sauvegarde, panneau admin, intégration CRM). C'est une approche qui limite le risque de sur-ingénierie.