So I’m trying to make a Globe component with map on it where I can paint countries in different color. I managed to make it so border color is changeable but all the time I try to paint inside with Shapes I end up either having map being flat in the middle of the sphere or when I properly wrap my sphere with a map some fillings go under the sphere mesh and are not being fully filled.
I can solve it by changing elevation so map doesn’t touch the sphere but then it looks not exactly how I want.

Can someone help me to figure out how to do? I also don’t have much of experience with webgl to be honest.

Here is my current component code, would to figure out how to make those countries that are in the code have painted border to have filling inside too

import { useState, useRef, useEffect } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
import { json } from "d3-fetch";

function Globe() {
  const meshRef = useRef();
  const [geoJson, setGeoJson] = useState(null);

  useEffect(() => {
    json(
      "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"
    )
      .then((data) => {
        setGeoJson(data);
      })
      .catch((error) => console.error("Error fetching GeoJSON:", error));
  }, []);

  useFrame(() => {
    if (meshRef.current) {
      // Rotate the globe
      meshRef.current.rotation.y += 0.015;

      // Smoothly adjust the tilt using a sinusoidal function
      const tiltAngle =
        (Math.sin(meshRef.current.rotation.y / 3) * Math.PI) / 12; // Max tilt 15 degrees
      meshRef.current.rotation.x = tiltAngle;
    }
  });

  if (!geoJson) return null;

  const radius = 3; // Radius of the globe
  const elevation = 0.01; // Elevation above the globe surface

  const latLonToVector3 = (lat, lon, radius, elevation = 0) => {
    const phi = (90 - lat) * (Math.PI / 180);
    const theta = (lon + 180) * (Math.PI / 180);

    const x = -(radius + elevation) * Math.sin(phi) * Math.cos(theta);
    const y = (radius + elevation) * Math.cos(phi);
    const z = (radius + elevation) * Math.sin(phi) * Math.sin(theta);

    return new THREE.Vector3(x, y, z);
  };

  const createCountryBorders = (coordinates) => {
    const shapeVertices = coordinates[0].map(([lon, lat]) =>
      latLonToVector3(lat, lon, radius, elevation)
    );

    const geometry = new THREE.BufferGeometry().setFromPoints(shapeVertices);

    return geometry;
  };

  const generateCountryLines = () => {
    return geoJson.features.flatMap((feature, index) => {
      const { type, coordinates } = feature.geometry;
      const countryName = feature.properties.name;
      let color = "#e4e4e7"; // Default color

      if (countryName === "Poland") {
        color = "#ef4444";
      } else if (countryName === "Germany") {
        color = "#ef4444";
      } else if (countryName === "Belarus") {
        color = "#ef4444";
      } else if (countryName === "France") {
        color = "#ef4444";
      } else if (countryName === "Italy") {
        color = "#ef4444";
      } else if (countryName === "Spain") {
        color = "#ef4444";
      } else if (countryName === "Portugal") {
        color = "#ef4444";
      } else if (countryName === "Netherlands") {
        color = "#ef4444";
      } else if (countryName === "Belgium") {
        color = "#ef4444";
      }

      const countryGroup = new THREE.Object3D();

      if (type === "Polygon") {
        const geometry = createCountryBorders(coordinates);
        const material = new THREE.LineBasicMaterial({ color });
        const line = new THREE.Line(geometry, material);
        countryGroup.add(line);
      } else if (type === "MultiPolygon") {
        coordinates.forEach((polygon) => {
          const geometry = createCountryBorders(polygon);
          const material = new THREE.LineBasicMaterial({ color });
          const line = new THREE.Line(geometry, material);
          countryGroup.add(line);
        });
      } else {
        console.warn("Unsupported geometry type:", type);
      }

      return <primitive key={index} object={countryGroup} />;
    });
  };

  return (
    <group ref={meshRef}>
      <mesh>
        <sphereGeometry args={[radius, 64, 64]} />
        <meshStandardMaterial color="#7dd3fc" wireframe={false} />
      </mesh>
      {generateCountryLines()}
    </group>
  );
}

export default Globe;

Tried to use different tree js component but none seemed to work properly