search

vasturiano / react-globe.gl

React component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/react-globe.gl/example/world-population/
MIT License
861 stars 154 forks source link

Getting pixel value of globe radius #61

Open dendorferpatrick opened 3 years ago

dendorferpatrick commented 3 years ago

Hi, thanks for the nice package.

I am struggling to get the pixel length of the globe radius for a given width of the module and altitude. Can the radius somewhere be extracted?

vasturiano commented 3 years ago

@dendorferpatrick thanks for reaching out. I'm not sure I'm following, can you give an example of what you're trying to achieve?

dendorferpatrick commented 3 years ago

Hi @vasturiano , thx for your response. So far, I understand, that I can set the width of the globe component (globe + background) and the altitude(zoom). Can I now extract the radius of the rendered globe?

vasturiano commented 3 years ago

@dendorferpatrick thanks for clarifying.

Assuming the globe is not rotated vertically from its initial position, you could just measure the screen coords of the two poles. The y distance will give you the pixel diameter. Divide by 2 to get the radius. Something like:

// assuming myGlobeRef is tied to the globe component
const northPole = myGlobeRef.current.getScreenCoords(90, 0);
const southPole = myGlobeRef.current.getScreenCoords(-90, 0);
const globeRadiusPx = (southPole.y - northPole.y) / 2