Avez-vous toujours rêvé de créer des sites web hors normes proposant une véritable expérience interactive et visuelle à vos utilisateurs ? JavaScript peut vous aider à concrétiser vos visions créatives les plus folles !
Quatre étudiants de la filière Ingénierie du Web de l’ESGI, Mehdi SABER, Arthur VADROT, Milan CAMUS et Léandre DIBI ont organisé un Meet-up afin de présenter différentes librairies et frameworks JS open source permettant de faire, par exemple, des animations, de la 3D ainsi que d’autres possibilités de réalisation.
Dynamiser son site et se différencier avec la 3D
Actuellement, il est indispensable d’avoir un site internet en ligne afin de vendre des produits/services afin d’acquérir de potentiels nouveaux clients. La majorité des sites sont souvent statiques et/ou similaires les uns aux autres. Et s’il était possible de se différencier en donnant une expérience visuelle unique aux visiteurs ?
Sébastien Dubourg, Développeur frontend React/Three.js, est intervenu lors de ce Meet Up afin de montrer comment booster l’expérience utilisateur de son site avec Three.js qui est une bibliothèque Javascript pour créer des scènes 3D dans un navigateur web. Il a d’abord expliqué les notions de base comme la scène, la caméra, ainsi que la complexité d’utiliser de la 3D.
Il a découpé la conférence en 4 parties :
- Explication de Threejs et le but de la 3D
- Présentation des frameworks 3Ds existants
- Explication des notions de base nécessaires
- Démonstration via un projet
- ThreeJS et WebGL : Trop compliqué ?
Utiliser la 3D sur son site nécessite de configurer une scène, gérer la caméra ainsi que ces positions. Pour remédier à ces problèmes de développement, Sebastien a présenté différentes librairies npm comme react-three/fiber, leva et eact-three/drei qui permettent de mettre en place une scène 3D en quelques lignes de codes dans un projet React.
Pour donner vie à son explication, Sébastien a reprogrammé une animation CSS en component React/Threejs. Le but était de récupérer un component, par exemple un loader, et de le modifier en une animation CSS en 3D. Il a montré via cette librairie comment simplifier son code, tout en donnant une plus-value artistique à son sites, les features à utiliser afin que les participants à la conférence qui puissent se lancer dès la fin de cette conférence.
Developpeur 3D, un métier à part
A travers cette conférence, Sébastien a cherché à faire comprendre la complexité auquel les développeurs frontend 3D sont confrontés afin de délivrer une expérience visuelle unique aux visiteurs et comment ces développeurs réinventent la façon dont les sites actuels sont présentés. Être développeur 3D nécessite des compétences en mathématiques pour maitriser les vecteurs pour les positions de camera et de nombreux autres paramètres et de la créativité afin de créer des animations originales tout en proposant un univers a son site.
Pour les quatre étudiants, organiser ce meet-up fut un véritable défi :
« Nous nous étions reparti les rôles afin d’éviter les problèmes techniques et passages qui auraient pu ennuyer les internautes. J’ai été très surpris de la présentation de Sébastien car j’ai été captivé et attentif à ses explications afin de pouvoir moi-même mettre en pratique ses conseils pour mes projets. J’ai été ravi qu’il ait accepté notre invitation, je pense que la plupart des spectateurs ont appris beaucoup de choses sur le sujet et ne se sont pas ennuyés pendant ces deux heures de conférence »
Léandre DIBI, étudiant en cinquième année en Ingénierie du Web à l’ESGI
L’ESGI est heureuse de voir ses étudiants porter ce type de conférence. Permettre au plus grand nombre de bénéficier du savoir d’experts, c’est l’une des vocations de l’école.
