How can I map Countries on a ThreeJS Sphere?

Question

I am currently working on a project including a 3D Earth. I created a 3D Sphere using ThreeJS and everything works fine 😎

Now here's the thing:

I want the countries to be interactive or rather customisable. I want some countries to have a different color than others and so on.

I figured that a possible way to achieve this is to Draw Each Country as a Polygon on a 2D Canvas, then map the canvas onto the sphere.

Problem: I got the Geo Data from here: https://geojson-maps.ash.ms. This json Contains all the countries Border Coordinates as Lats and Longs like let germany = [[-51.32, 24.53], [-10.43, 53.98], ...]. How do I draw a polygon on the canvas at the according location using these Coordinates?

I have found a video where someone did exactly what I want to do. He implemented it in Unity. Maybe this helps to understand what I want to achieve: https://youtu.be/sLqXFF8mlEU?t=636. (Start at 10:37)

I am relatively new to Programming and JS. I know there are similar questions on the web but I really do not understand the answers or they just don't fit my problem. My Head is steaming and I tried everything for the last 5 hours.

Thank you for your patience.

Answer 1

I figured out a solution that fits my problem:

function getPXfromLatLng(lat, lon) {
        let posX = ((lat + 180.0) * (canvasW / 360.0));
        let posY = (((lon * -1.0) + 90.0) * (canvasH / 180.0));
        return { x: posX, y: posY };
}