How do I calculate which vertice is the closest to a 3D point?

Question

Goal:

I want to find out which vertice/vertex is the closest to the point I clicked.

Setup:

• Perspective camera
• Icosahedron geometry (basicmeshmaterial -> wireframe)
• Rotating geometry
• Raycaster

Code I already have for the click handler:

mouse = new THREE.Vector2();
mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;

raycaster.setFromCamera(mouse, camera);

const intersects = raycaster.intersectObject(icosahedron);

// 3D point: intersects[0].point
// Object face: intersects[0].face

Thanks!

Answer 1

Three steps:

• Convert the position of the vertices of the intersection face from local to world
• Calculate the distance to the 3D point
• Sort ascending distance

-

vertices = [
  intersects[0].face.a,
  intersects[0].face.b,
  intersects[0].face.c
];

vertices.forEach( function(vId,i){
  vertices[i] = mesh.geometry.vertices[vId].clone();
  vertices[i].l2w = mesh.localToWorld(vertices[i].clone());
  vertices[i].id = vId;
  vertices[i].index = i;
  vertices[i].distance = vertices[i].l2w.distanceTo(intersects[0].point);
})

vertices.sort( function(a,b){
  return a.distance - b.distance;
})

https://jsfiddle.net/fwnjoc31/