Hide globe markers when they invisible

Questions
,
1

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.

image
image589×603 266 KB

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;
}
2

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.

3

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

2 Likes
4

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'
else 
    wrapper.style.cursor = 'auto'
5

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