Retour aux projets03 / 14
Apex // Motion
Configurateur 3D immersif et expérience Porsche en temps réel
Contexte
Créer une expérience 3D immersive et fluide autour d'un modèle Porsche complexe (configurateur temps réel, télémétrie de circuit) sans sacrifier les performances ni l'accessibilité sur le web.
Solution
Développement d'un configurateur temps réel avec React Three Fiber et Three.js, optimisé via compression Draco et rendu conditionnel (IntersectionObserver, résolution adaptative). Animations pilotées par GSAP/Lenis et son procédural via Web Audio API, sans aucun fichier audio.
Architecture technique
- 3D Temps RéelReact Three Fiber, Drei et post-processing (bloom, grain, vignette) pour un rendu cinématique à 60 FPS
- PerformanceRendu conditionnel (IntersectionObserver, visibilité d'onglet), résolution adaptative et lazy-loading via next/dynamic
- ExpérienceConfigurateur 45 teintes, timeline patrimoine sur sept décennies, télémétrie de circuit et audio procédural (Web Audio API)
Aperçus
Performance mesurée
- Performance100
- Accessibilité96
- Bonnes pratiques100
- SEO100
Chaque projet intègre les standards de l'éco-conception : cache avancé, lazy-loading, formats d'images nouvelle génération et infrastructure à faible empreinte carbone.