I have created a 3D earth using react-three-fiber and now I want to add multiple points on the surface of the model. Let's say I have an array with real coordinates of cities and I want to show those cities on the surface of the planet. Below is the code snippet for 3D earth.
<mesh>
<sphereGeometry args={[2.75, 100, 100]} />
<meshPhongMaterial specularMap={earthSpecularMap} />
<meshStandardMaterial
map={earthDiffuseMap}
normalMap={earthNormalMap}
/>
</mesh>
I was able to add one coordinate using below code
<mesh position={[0,0,2.75]} >
<sphereGeometry args={[0.05, 100, 100]} />
<meshBasicMaterial color={"red"} />
</mesh>
But above code generated an another sphere and it's location is fixed at one place and I'm unable to position it to where I want. Also adding multiple of these is resulting in points appearing at same location. Is there any other easy way to add coordinates compatible to above 3D model?