C’est possible de le faire. Évidement, la méthode demandera des outils externes et je vous propose dans cet article l’outil que j’ai choisi et pour quelles raisons. Le but final est de pouvoir implémenter un globe terrestre dynamique sur votre site web.
L’outil utilisé
J’ai opté pour la librairie Globe.js. Et pour 2 raisons essentielles ; il était recommandé sur la toile et enfn, il réalisait exactement ce que je souhaitais réaliser. Voilà le lien : https://globe.gl/.
Grâce à cette librairie Javascript externe, il m’est permis d’importer un globe et surtout de pouvoir interagir avec lui. Voilà à quoi cela ressemble sur codePen :
Vous verrez dans mon code qu’il y a en réalité 2 librairies externes. En effet, d3.js est également ajouté. Comme son nom l’indique, c’est lui qui va réaliser tout l’aspect 3D de l’animation.
Comment ça marche ?
Là où c’est intéressant, c’est à partir de la ligne 9 de mon Javascript. La constante « World » appelle la fonction Globe qui initie l’outil et une série de fonctions qui vont ensuite s’enchaîner. Chacune d’entre elles va paramétrer notre planète en 3D. Par exemple, les 2 premières fonctions appellent chacune une image. L’une affiche les étoiles qui se trouvent autour de ma planète et l’autre est une photo de la terre prise pendant la nuit (sur tout le globe). Il est possible d’en trouver d’autres sur la toile. 3D.js s’occupe de modifier ces images pour les rendre sphériques (en 3D). Pour voir à quoi l’image ressemble, il suffit de se rendre sur l’URL de l’image :
https://unpkg.com/three-globe@2.31.0/example/img/earth-night.jpg
D’autre fonctions sont utlisées pour changer par exemple la couleur au survol des « polygons » (qui délimitent un pays), ou la profondeur de ces derniers. Une action au clique d’un pays se réalise avec la fonction suivante : onPolygonClick. Elle peut récupérer en paramètre la Longitude et la Latitude où vous avez cliqué. Moi je réalise une action sur le globe en entier en le recentrant sur le point cliqué. C’est possible de le faire avec la fonction pointOfView. Autrement dit, cette librairire JS fonctionne comme toutes les autres ; vous l’importez et ensuite vous la paramétrez pour aboutir à votre objectif final.
Voilà la doc officielle où vous trouverez toutes les possibilités de manipulation du globe :
https://github.com/vasturiano/globe.gl/tree/master
Et les données du globe, d’où viennent-elles ?
Eh oui, il faut bien que le nom des pays et leurs délimitations viennent de quelque part !
Eh bien si vous regardez mon code côté JS, vous ne pouvez pas le manquer ! Toutes les données du globe se trouvent effectivement dans une constante (à la ligne 3) sous forme d’Objet. Et c’est sans doute ce qui posera le plus de travail dans votre projet, vous allez devoir élaguer votre JSON pour n’importer que ce qui est nécessaire, et sans forçément le nom de tous les pays ou le taux de la population par pays par exemple. Mieux : vous allez pouvoir ajouter vous-même vos données exploitables.
