# How to know the number of points overlap the polygon?

**URL:** <https://discourse.threejs.org/t/how-to-know-the-number-of-points-overlap-the-polygon/21346>\
**Category:** Questions\
**Tags:** polygon, points, raycaster\
**Created:** [December 8, 2020, 10:23am UTC](https://discourse.threejs.org/t/how-to-know-the-number-of-points-overlap-the-polygon/21346 "2020-12-08T10:23:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kunyao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kunyao/32/15003_2.png) [@kunyao](https://discourse.threejs.org/u/kunyao)\
**Post date:** [December 8, 2020, 10:23am UTC](https://discourse.threejs.org/t/how-to-know-the-number-of-points-overlap-the-polygon/21346/1 "2020-12-08T10:23:27Z")

</div>

Hello,

In my scene, it with points and polygon, when the mouse points out the place with both overlap, a panel will popped-up and shows the information according to the userdata array comes from the object.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/488ad5b0a2193f81bf928eb69495eb7c8864ec6c.png)

My question is the following

1. Can I know how many points overlap the polygon when the mouse hovers the polygon?
2. If it is possible, how can I highlight the points which are overlapped the polygon when I click the polygon?

At this moment, I can only know the information when the mouse hovers the targets. I would like to know how many points overlap to the polygon when the mouse hovers the polygon, thanks.

Here is my implementation of the mouse event.

```
function onDocumentMouseMove(event) {

var intersectsPlanes = raycasterEvent(event, planes, null); // polygone
var intersectsPoints = raycasterEvent(event, points, 0.001); // point

if (intersectsPlanes.length > 0 && intersectsPoints.length > 0) {
    $("#geneSet tbody tr").css("background-color", "#fff");
    $('html,body').css('cursor', 'pointer');
    $("#geneClassInformation").css("top", event.clientY + 30).css("left", event.clientX + 30).css("color", "#fff").fadeIn(300);
    $(".geneColorbar").show().css("background-color", intersectsPoints[0].object.userData.bgcolor);
    $(".classColorbar").show().css("background-color", intersectsPlanes[0].object.userData.bgColor);
    $(".polygoneInfomation").html(intersectsPoints[0].object.userData.geneName + " in class id: " + intersectsPlanes[0].object.userData.classid + "<br>" + intersectsPoints[0].object.userData.x + " , " + intersectsPoints[0].object.userData.y + " , " + intersectsPoints[0].object.userData.z);

    var hoverGeneIdx = nameSet_noneduplicate.indexOf(intersectsPoints[0].object.userData.geneName);
    $("#geneSet tbody tr").eq(hoverGeneIdx).css("background-color", "#ececec");
}

if (intersectsPlanes == 0 || intersectsPoints == 0) {
    $('html,body').css('cursor', 'default');
    $("#geneClassInformation").hide();
    $("#geneSet tbody tr").css("background-color", "#fff");
}

```

}

```
function raycasterEvent(event, target, threshold){
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
if(threshold != null){raycaster.params.Points.threshold = threshold;}
var intersects = raycaster.intersectObjects(target);

return intersects;

```

}