title: Three JS Raycasting - Find point closest to cursor
body: <p>Three.js r85</p>
  
  <p>When raycasting with Three JS, a series of points is returned, and I'd like to find the point that is closest to the cursor. The first point returned seems to be the point that is closest to the camera.</p>
  
  <p>Is there a way to find the distance between the cursor position and a point?</p>
  
  <p>Here's the code I'm using to debug this right now:</p>
  
  <pre><code>var raygun = new THREE.Raycaster();
  raygun.setFromCamera(mouse, camera);
  var hits = raygun.intersectObjects([plotpoints]);
  
  if (hits.length &gt; 0) {
      scope.remove(dotPlot);
      scope.remove(dotPlot2);
  
      // All points except the first one - Grey
      dotGeo = new THREE.Geometry();
      for (var i=1; i &lt; hits.length; i++) {
          dotGeo.vertices.push(plotpoints.geometry.vertices[hits[i].index]);
      }
      dotPlot = new THREE.Points(dotGeo, dotMat);
      scope.add(dotPlot);
  
      // First point - Orange
      var geo2 = new THREE.Geometry();
      geo2.vertices.push(plotpoints.geometry.vertices[hits[0].index]);
      dotPlot2 = new THREE.Points(geo2, dotMat2);
      scope.add(dotPlot2);
  
      scope.render();
  }
  </code></pre>
  
  <p>And here's what I'm seeing:</p>
  
  <p><a href="https://i.stack.imgur.com/WJIJE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WJIJE.png" alt="First point is not close to cursor"></a></p>