11,8 → 2,6 Mo
Un modèle allégé pour le web
Géométrie compressée avec meshopt, textures en WebP plafonnées à 1024 px, via gltf-transform.
Étude de cas — Configurateur 3D temps réel
Voir la voiture qu'on commande, avec son prix, avant de la commander.
- Client
- Norvane, constructeur électrique fictif
- Rôle
- Développement front-end 3D, intégration, direction artistique
- Stack
- Three.js, TypeScript, GSAP, Vite
- Livrables
- Configurateur web, catalogue JSON, lien partageable
Projet réalisé pour démontrer une méthode de travail. La marque, les prix et les caractéristiques sont inventés, le brief est un scénario type.
Le brief
Norvane lance l'Aurore, une berline électrique vendue surtout en ligne. Les acheteurs comparaient teintes et jantes sur des photos retouchées, puis découvraient la voiture en concession.
L'équipe marketing voulait un configurateur où la voiture affichée est celle qui sera livrée. Trois contraintes ont guidé le projet : la teinte à l'écran correspond au nuancier, la page reste fluide sur un portable sans carte graphique dédiée, et les règles commerciales (options réservées à une version, équipements de série, incompatibilités) sont décrites dans les données, modifiables sans toucher au code.
Le parcours
- VersionAutonomie, 0 à 100 km/h et puissance. La version filtre les choix suivants.
- TeinteNacré, métallisé, candy, mat : le vernis et les paillettes changent avec la couleur.
- Jantes et étriersLa caméra descend sur la roue avant.
- IntérieurLes portes s'ouvrent, la caméra passe par l'ouverture et s'installe au volant.
- OptionsOptions de série selon la version, incompatibilités expliquées.
- SynthèsePrix détaillé, mensualité, lien qui rouvre la configuration, demande d'essai.
Choix techniques
0 image/s au repos
Rendu à la demande
La scène se redessine seulement quand quelque chose bouge : caméra, transition de teinte, porte. Voiture immobile, le GPU ne travaille pas et le portable reste silencieux.
0 Mo d'HDRI
Un studio écrit en code
Le cyclorama et les boîtes à lumière qui dessinent les reflets sont une petite scène convertie une fois en éclairage d'environnement. Rien à télécharger, et chaque source se règle comme un projecteur de studio.
PBR Neutral
Des couleurs fidèles au nuancier
Le tone mapping Khronos PBR Neutral a été conçu pour le commerce en ligne : il garde la teinte de base. Chaque teinte règle aussi métal, rugosité, vernis et iridescence.
1 matériau carrosserie
Changer de teinte sans saccade
Toute la carrosserie partage un matériau. Une nouvelle teinte interpole quelques valeurs, sans téléchargement ni recompilation de shader. Le reflet au sol réutilise les mêmes géométries et matériaux.
catalog.json
Les règles dans les données
Prix, disponibilités par version, options de série et incompatibilités sont dans un fichier JSON qu'une API ou un back-office peut fournir. Quand une règle modifie un choix, un message dit pourquoi.
Mesures en direct
Relevées par le moteur de rendu de cette page, dans votre navigateur, depuis son ouverture. Faites tourner la voiture en haut de page puis revenez : le compteur d'images n'avance que pendant les mouvements.
–images calculées
–du temps sans rendu
–appels de dessin par image
–triangles, reflet compris
–densité de pixels adaptative
Ce que ça montre
Un configurateur se joue sur le premier affichage, la réponse à chaque clic et la confiance au moment du prix.
Ici le modèle s'affiche une fois ses matériaux compilés, chaque choix répond en moins d'une seconde avec une transition, et la synthèse détaille chaque ligne avec un lien qui restaure la configuration. La même base sert pour tout produit configurable : mobilier, montres, vélos, cuisines. On change le modèle et le catalogue.
Leia Percherancier — Développeuse front-end 3D