Un avion 3D,
piloté au scroll.
Un canvas Three.js fixe, derrière la page.
Derrière les textes, un canvas occupe tout l'écran : c'est là que Three.js affiche la 3D. L'avion est un modèle 3D (fichier GLB) intégré directement dans la page. Au chargement, le code le centre, le met à la bonne taille et lance la rotation de l'hélice. Autour de lui : des lumières, du brouillard pour la profondeur, et des nuages pour habiller le ciel.
Le défilement devient
la timeline du vol.
Toute l'animation est une timeline GSAP unique, reliée au scroll par ScrollTrigger en mode scrub : la position de défilement pilote l'avancement, avec un léger lissage. La timeline anime en parallèle la caméra, la rotation de l'avion (un tonneau à 360°) et les couleurs du ciel via des variables CSS. Chaque bloc de texte a son propre ScrollTrigger pour apparaître, et les compteurs (altitude, vitesse, cap) sont calculés à partir de la progression du scroll.
Un site qui se visite,
pas juste qui se lit.
La 3D intégrée au web, c'est la grande tendance du moment : elle rend un site vivant et interactif, capte l'attention et transforme une simple page en expérience. Grâce à WebGL, tout tourne directement dans le navigateur.
Reprendre le vol