search

vasturiano / three-globe

WebGL Globe Data Visualization as a ThreeJS reusable 3D object
https://vasturiano.github.io/three-globe/example/links/
MIT License
1.19k stars 145 forks source link

Possible to determine the width / height of the globe? #47

Closed joshwaaaah closed 2 years ago

joshwaaaah commented 2 years ago

Hi, apologies if this is the incorrect place to ask, but I'm trying to determine the width / height of the globe when appearing within the canvas. The camera has unique z / y values set, so I'd need to take that into account.

The reason I'm trying to achieve this is because I would like to overlay a native DOM element (a circle) directly over the Three.js globe, with the same position, width and height.

Is this possible, and does anybody have any ideas about how I might approach this?

vasturiano commented 2 years ago

@joshwaaaah you can get the dimension of the Globe in ThreeJS WebGL distance units via the .getGlobeRadius() method.

To translate that into pixel screen coordinates, it all depends on your camera setup, its point of view and how far it is from the object itself.

joshwaaaah commented 2 years ago

Hi @vasturiano,

That's great, thanks a lot for the help, I will give that a go.

Thanks again!

joshwaaaah commented 2 years ago

Hi @vasturiano,

Apologies for commenting again. I've spent some time trying to figure out how to determine the width of the element based on your suggestion, but I'm not having much luck.

Do you have any suggestions on the method I need to use to determine this? I'm not sure how I should use the FOV etc. to do it currently.