0
229
ViewsHide WebGL globe markers when behind
I'm in the process of building a WebGL Globe using OGL (a lightweight webgl library, way smaller than Three.js) and found a way to place markers on the globe, from lat/long coordinates.
It works perfectly and it looks very nice but I am now struggling to "hide" them when they are visually behind the globe. Right now they are still visible even though we should not see them as seen below:
What would be the way to calculate that? And/or if it can't be done, another way could be to show them sticking around the globe to show that some markers are available further.
Here is a working CodeSandbox demo: Globe
1 answers
Answer question0
Your transform code is a 3D transform, but you only use the x and y coordinates to display the projected labels. You can use the 3rd coordinate to determine if you're in front or behind the sphere.
A quick patch to your code to do as you wish was this:
markerEl.style.display = screenVector[2] < 0.83 ? "block" : "none";