[Suggestion/Need help]: Fill the surface with dots (or other shapes) then Group them by country

[BangNguyen1992]

Is your feature request related to a problem? Please describe.

1. I want to wrap the globe with a dots layer, it would be similar to a hexed polygon layer but with a rounded shape instead of a hexagon
2. If possible, it can be config with different shapes

I am quite new to the THREE.js so I am not that good in 3D objects yet, so any guide or tutorial on how to achieve the solution is welcome.

Describe the solution you'd like

• The new layer (dots layer) would be similar to a hexed polygon layer but with a rounded shape instead of a hexagon.

Describe alternatives you've considered

• I haven't tried with the custom layer yet so I am not sure if it would give me the correct result

Additional context

• Similar to what Stripe was doing https://stripe.com/blog/globe
• Or the codepen here https://codepen.io/emave/pen/WKNQOo

The Github globe would be what I want to achieve in the end

Thank you!

[vasturiano]

@BangNguyen1992 the hexed polygons layer doesn't currently support any other shapes other than hexes. But possibly if you reduce the hex sizes enough (increase hexPolygonMargin) they'll start resembling dots so the shape will matter less. Have you tried that?

[BangNguyen1992]

Hello @vasturiano, Thank you for the quick reply.

Yes, I have tried it, I changed it from 0.7 to 0.75, and it looks much better now. However, when I zoom in to altitude: 0.5, I begin to see the hexagon clearly.

With hexPolygonMargin 0.7:

When zoom-in

With hexPolygonMargin 0.75:

When zoom-in

PS: If there is no quick solution, I think this is an okay result. However, I just want to elaborate on the solution a bit, do you have any suggestions to achieve a different shape? Might be using a custom layer, or threejs object like this codepen.

https://codepen.io/emave/pen/WKNQOo

[vasturiano]

You could potentially do it in a custom layer. Currently it's mainly a combination of functionality from h3-js for the hex layout computation, and the rendering of conic ThreeJS objects using three-conic-polygon-geometry. These conic object surfaces have hexagon shapes in geojson format, as defined by h3-js.

Here is the relevant portion of the code in the three-globe module: https://github.com/vasturiano/three-globe/blob/d8eba6ee5fd2344deb870a4db55285a0d743674e/src/layers/hexedPolygons.js#L99-L144

[BangNguyen1992]

Thank you @vasturiano, I will look more into it

[vasturiano]

@BangNguyen1992 just to let you know that I've recently added functionality that allows to have the polygon points as circular dots. You just need to add hexPolygonUseDots={true} (disabled by default), in the hexed polygons layer.

And here's an example of what it looks like.

[BangNguyen1992]

@vasturiano That's great, thank you very much

[tyn1998]

Hello @BangNguyen1992, the blue globe with white dots and lightblue atmosphere around it looks great and currently I also want to implement a globe just like GitHub's :)

I'm new to globe.gl and 3D world and I'm eager to learn. Would you mind providing a code snippet for your globe?