Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

Question

Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

Three.js version r85

While using raycasting in Three JS, a list of points is generated, and I am interested in identifying the point closest to the cursor. It appears that the first point returned is typically the one nearest to the camera.

Is there a method available to determine the distance between the cursor position and a specific point?

The following code snippet is what I currently have for debugging purposes:

var raygun = new THREE.Raycaster();
raygun.setFromCamera(mouse, camera);
var hits = raygun.intersectObjects([plotpoints]);

if (hits.length > 0) {
    scope.remove(dotPlot);
    scope.remove(dotPlot2);

    // All points except the first one - rendered in grey
    dotGeo = new THREE.Geometry();
    for (var i=1; i < hits.length; i++) {
        dotGeo.vertices.push(plotpoints.geometry.vertices[hits[i].index]);
    }
    dotPlot = new THREE.Points(dotGeo, dotMat);
    scope.add(dotPlot);

    // First point highlighted in 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();
}

This is the current output I'm observing:

https://i.sstatic.net/WJIJE.png

javascript three.js

Answer 1

Answer №1

Success! I solved it using mathematical computations!

One important thing to note is that hits[].points gives the point directly under the cursor, but it doesn't snap to points.

To obtain the precise position of the point, we must first use hits[].index to retrieve the index number of the point/vertex we hit. Then, we can access that specific vertex by utilizing GEOMETRY.vertices[], providing a THREE.Vector3 representation of the vertex point where our raycast landed.

By inputting the index, we can acquire the exact position of each vertex struck by our raycast:
GEOMETRY.vertices[hits[i].index]

This method offers basic snapping functionality to vertices.

Note: When employing THREE.LineSegments, the outcome will always be the starting point, not the end point. To get the ending point, simply add 1 to the index value:

GEOMETRY.vertices[hits[i+1].index]

In order to snap directly to the vertex nearest to the cursor, we need to determine the vertex with the shortest perpendicular distance from the ray of the raycaster. This involves using a cross product of two vectors—a math concept rather than a programming one. For further understanding on this topic, look up something like: perpendicular distance from a point to a line

I borrowed and adapted the code from this query:

And here's the resulting code snippet:

// Variables for comparison
var smallestDist = 99;
var smallestPointIndex = 0;

// Declaring variables outside the loop for efficiency
var m_ray = raycaster.ray;
var raydir = m_ray.direction; 
var origin = m_ray.origin;
var hitray = new THREE.Vector3(0,0,0);
var dist = 1;

// Traverse all points to find the closest one
for (var i=0; i<hits.length; i++){
    // Mathematical calculations at work
    hitray.subVectors(plotpoints.geometry.vertices[hits[i].index], origin);
    dist = new THREE.Vector3().crossVectors(raydir, hitray).lengthSq();

    // Keeping track of the nearest point
    if (dist < smallestDist) {
        smallestDist = dist;
        smallestPointIndex = i;
    }
}

// Now we have the single closest point

That's the solution :)

https://i.sstatic.net/Plfvn.png

Answer 2

Success! I solved it using mathematical computations!

One important thing to note is that hits[].points gives the point directly under the cursor, but it doesn't snap to points.

To obtain the precise position of the point, we must first use hits[].index to retrieve the index number of the point/vertex we hit. Then, we can access that specific vertex by utilizing GEOMETRY.vertices[], providing a THREE.Vector3 representation of the vertex point where our raycast landed.

By inputting the index, we can acquire the exact position of each vertex struck by our raycast:
GEOMETRY.vertices[hits[i].index]

This method offers basic snapping functionality to vertices.

Note: When employing THREE.LineSegments, the outcome will always be the starting point, not the end point. To get the ending point, simply add 1 to the index value:

GEOMETRY.vertices[hits[i+1].index]

In order to snap directly to the vertex nearest to the cursor, we need to determine the vertex with the shortest perpendicular distance from the ray of the raycaster. This involves using a cross product of two vectors—a math concept rather than a programming one. For further understanding on this topic, look up something like: perpendicular distance from a point to a line

I borrowed and adapted the code from this query:

And here's the resulting code snippet:

// Variables for comparison
var smallestDist = 99;
var smallestPointIndex = 0;

// Declaring variables outside the loop for efficiency
var m_ray = raycaster.ray;
var raydir = m_ray.direction; 
var origin = m_ray.origin;
var hitray = new THREE.Vector3(0,0,0);
var dist = 1;

// Traverse all points to find the closest one
for (var i=0; i<hits.length; i++){
    // Mathematical calculations at work
    hitray.subVectors(plotpoints.geometry.vertices[hits[i].index], origin);
    dist = new THREE.Vector3().crossVectors(raydir, hitray).lengthSq();

    // Keeping track of the nearest point
    if (dist < smallestDist) {
        smallestDist = dist;
        smallestPointIndex = i;
    }
}

// Now we have the single closest point

That's the solution :)

https://i.sstatic.net/Plfvn.png

Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

Answer №1

Similar questions

Change the text of a button by using an input field

Issues arise when attempting to utilize jQuery to print a string once a button is pressed

What is the best way to retrieve the duration of an object tag using JavaScript or jQuery?

Can CSS Variables be changed globally using jQuery?

Gradually vanishing words while they glide across the screen

Encountering a MiniCssExtractPlugin error while trying to build with npm

Can Vue.js automatically refresh the display when there are changes in a third-party JSON file?

Refreshing the Table to Update Data

Unable to create the complete PDF file using html-pdf in a NodeJS environment

Is there a way to simulate a click event (on a file type input) within a promise?

Creating a personalized pivot-table using the WebDataRock Javascript library with a unique configuration based on a

How would you go about creating a VueJS component that displays a table with a set number of columns and automatically distributes the cells within them?

Creating a three-row CSS layout where the middle row aligns to the right side

Save the output of a knex query to a variable

Display the json encoded result of a MySQL SUM() query

Accepting multiple file inputs in a form without using a selector, but instead utilizing the 'this' keyword or finding an alternative approach

Adjusting the height of an element as you scroll will activate the scroll event

Do you know if there is a setting in prettier that allows line breaks to be preserved?

Is the npm mqtt module continuously running but not performing any tasks?

Issue with Electron-vue: 'compute:' not functioning as expected