javascript - Three.js - How to check if object is behind a sphere (not visible) -

i have sphere (globe) objects (pins) on surface dom elements (labels) calculated pin position 2d world.

my problem when pins go behind globe (with mouse dragging or animation) need hide labels in dom text label isn’t visible without pin.

my logic if can pin in 3d world tell me if it’s behind globe can hide label associated pin.

codepen whole code.

the function have researched together:

function checkpinvisibility() {      var startpoint = camera.position.clone();      (var = 0; < pins.length; i++) {          var direction = pins[i].position.clone();         var directionvector = direction.sub(startpoint);          raycaster.set(startpoint, directionvector.clone().normalize());          var intersects = raycaster.intersectobject(pins[i]);          if (intersects.length > 0) {             // ?         }      } } 

i have researched through many posts can’t result needed:

• threejs: how detect if object rendered/visible
• three.js - how check if object visible camera
• http://soledadpenades.com/articles/three-js-tutorials/object-picking/

i have gotten work mouse xy position ray, can’t working solution constant rendering pins.

you want know points on surface of sphere visible camera.

imagine line camera tangent sphere. let l length of line camera tangent point.

the camera can see points on sphere closer camera l.

the formula l l = sqrt( d^2 - r^2 ), d distance camera sphere center, , r sphere radius.