1

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?

Rav
  • 75
  • 9

0 Answers0