Hide globe markers when they invisible

I’ve just add some markers on globe, and it would show its name when mouseover.
As you can see, the LA behind globe, it should be non-interactive except that the markers in front of the globe, but I can still click the marker LA.
In this case, is there any good solution, hide the marker or prevent mouse pass through the globe? I have no idea how to implement by code, any help would be appreciated.

Here is my code:

var material = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    size: 20,
    transparent: true,
    blending: THREE.AdditiveBlending,
    map: createPoint(),     //use canvas texture
    depthWrite: false

function createPoint() {
    var canvas = document.createElement("canvas");
    canvas.width = 16;
    canvas.height = 16;

    var context = canvas.getContext("2d");
    var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, 
canvas.height / 2, canvas.width / 2);

    gradient.addColorStop(0, 'rgba(255,255,255,1)');
    gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
    gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
    gradient.addColorStop(1, 'rgba(0,0,0,1)');

    context.fillStyle = gradient;
    context.fillRect(0, 0, canvas.width, canvas.height);

    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;

You can use a Raycaster and cast a ray from camera towards the cursor (just like you’d do to detect interactions.)

If there’s more than a single intersection - it likely means that the marker you are hovering over is obstructed by another object / the globe.

Or use normalized position of a marker on the globe, performing check of visibility and/or interactivity like here: HTML on different faces of cube - #5 by prisoner849
or here: Three.js Aligning HTML Elements to 3D


Thank you very much! I finally solve it. Here is my solution:

let intersects = raycaster.intersectObjects(globeGroup.children) //globeGroup contains globe, points

if (intersects.length > 0 && intersects[0].object.name === 'points')
    wrapper.style.cursor = 'pointer'
    wrapper.style.cursor = 'auto'

Thank you for your answer, the information you provided is very helpful :gift: