How to know the number of points overlap the polygon?

Questions
, ,
1

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

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;

}

1 Like