How to position GeoJSON as mesh onto a globe surface

[lezan]

Hello, I am sorry to bother the community with a silly question, but I am unable to position SVG paths as mesh onto a globe surface.

To do it I tried to follow this example, but what I get is it not exacly what I need. To give you an idea I prepared this codesandox.

If you think that SVG as mesh is not suitable in this case, I am open to other suggestions (GeoJSON and so on). The only requirement is that I can put an event handler (hover and click) on country surface positioned onto globe.

Thanks in advance for you answers!

[lezan]

Try to give a follow up about two different implementations I came up (not fully working):

1. The first one use geojson triangulate to build a mesh thanks to a library
2. The second one use geojson directly thanks to a library

1. You can see my actual implementation here.
   To avoid issue I used geojson triangulated already avaiable here, then I follow instructions reported here. Basically it flat each MultiPolygon, convert to cartesian coordinates and then push vertices into a geometry. It also create faces and push them also into geometry.
   The problems arise from the fact that I'm not confident with Three.js nor with react-three-fiber, plus I have to switch from Geometry to BufferGeometry.
   Can you give me some hint how to fix issues? I am pretty sure I am doing something wrong with <bufferAttribute />. position and indices.

2. You can see my actualy implementation here
   In this case example almost fully working, but I cannot properly fix onHover event. I think because raycast method includes all objects intersecting the ray, not just the nearest, as reported here. Also looking into documentation I thought using e.stopPropagation() would fix issue.
   Can you give also here some hing how to solve this issue?

Thanks!

[lezan]

Second follow up, about first implementation.
As reported previous, I followed this example. Now I try - before react-three-fiber - to switch from Geometry to BufferGeometry. To do it I push vertices into an array and then used setFromPoints to set them. Example is working.

const vertices = [];
f.geometry.coordinates[0].forEach((t) => {
  t.slice(0, 3).forEach((v) => {
    vertices.push(convertCartesian(v))
   })
})
const featureGeometry = new THREE.BufferGeometry().setFromPoints(vertices);

Then I try something similar with react-three-fiber using useUpdate, but no mesh is placed onto surface. You can see all my try in codesandbox

[lezan]

Third follow up, always about first implementation.
I find a way doing what I want, but maybe it is too much imperative and I was wondering it could be possible to be more declarative.

I end up doing that (you can always check codesandbox):

function Land() {
  const [features, setFeatures] = useState([])

  useEffect(() => {
    fetch('/triangles.json')
      .then((res) => res.json())
      .then((countries) => {
        const tempFeatures = countries.features.map((d) => d)
        setFeatures(tempFeatures)
      })
  }, [])

  return (
    <group>
      {features.map((d, index) => (
        <Polygon key={index} feature={d} />
      ))}
    </group>
  )
}

Then

function Polygon({ feature }) {
  const geometry = useMemo(() => {
    const tVertices = []
    feature.geometry.coordinates[0].forEach((t) => {
      t.slice(0, 3).forEach((v) => {
        tVertices.push(convertCartesian(v))
      })
    })
    const tGeometry = new THREE.BufferGeometry().setFromPoints(tVertices)
    tGeometry.computeVertexNormals()
    return tGeometry
  }, [feature])

  return (
    <mesh geometry={geometry}>
      <meshBasicMaterial attach="material" color={feature.properties.nullData ? 'blue' : 'hotpink'} side={THREE.BackSide} />
    </mesh>
  )
}

Any suggestions?