Ce projet, réalisé en une semaine, propose une visualisation interactive de la Terre à l’aide de Three.js, connectée à une API Symfony afin d’assurer la scalabilité et la gestion dynamique des données.
Globe View
Voir le site
Description
La scène principale présente une sphère texturée représentant la Terre, avec une texture issue du site de la NASA. Des marqueurs colorés sont positionnés sur la planète pour indiquer les capitales, avec une couleur variant du jaune au rouge en fonction de la population de chaque ville. La taille des marqueurs varie également en fonction de la population.
Lorsqu’un utilisateur survole un marqueur, un effet de surbrillance se déclenche et un tooltip apparaît pour fournir des informations détaillées sur la capitale, telles que son nom, le pays, ses coordonnées géographiques et sa population. Les utilisateurs peuvent également verrouiller un marqueur en cliquant dessus, le maintenant ainsi en place.
L’animation de la Terre tourne lentement de manière automatique, mais se met en pause lorsque l’utilisateur interagit avec la scène. Après cinq secondes d’inactivité, l’animation reprend.
Enfin, un menu en haut à droite permet de filtrer les capitales selon leur population, et un bouton offre la possibilité de basculer en mode plein écran pour une expérience plus immersive.
Compétences développées
- Intégration de Three.js pour la création de scènes 3D interactives.
- Connexion d'une API Symfony pour gérer dynamiquement les données des capitales.
- Utilisation de textures haute résolution provenant de sources externes (NASA).
- Création et gestion d'animations 3D, y compris l'animation de rotation de la Terre.
- Implémentation de marqueurs interactifs et dynamiques, avec gestion des couleurs basées sur la population.
- Développement de tooltips informatifs et d’effets de surbrillance au survol des éléments.
- Conception d'une interface utilisateur (UI) pour filtrer les capitales et passer en mode plein écran.