Discovering intersection points along a line between the previous and current positions of the mouse in Three.js

I am working on a project in Three.js where I have a scene filled with lines. Everything is working smoothly when the mouse moves slowly, as I am using the raycaster method to check for intersections with the lines. However, the issue arises when the mouse moves quickly and skips over lines without registering them as intersections.

Is there a way in Three.js to detect all the objects that intersect the line in screenspace between the previous and current mouse positions? Are there any built-in tools or utilities that can assist with this particular problem?

My current strategy involves sampling points along the line and testing each one with the raycaster, but this does not fully address the issue at hand.

javascriptthree.jsgeometrycollision-detection

Answer №1

One method that may not be the most efficient but is simple to implement involves creating a plane based on the rays from each of the mouse points.

Next, check for intersections with the edges of your objects using the THREE.Plane.intersectLine() method.

Afterwards, eliminate intersections that do not fall between the rays defined by the mouse points.

An additional heuristic to narrow down the list of potential objects is to only consider those with bounding sphere centers closer to the plane than the radius, as determined by 

THREE.Plane.distanceToPoint(sphereCenter) < sphereRadius
.

Lastly, you must also employ traditional raycasting at the start and end points to capture objects with faces larger than the distance between the start and end points.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with rendering Base64 image array strings in FlatList component in React Native

In my RN App, I am trying to display a FlatList with Image Items but it seems like I have missed something. I am retrieving blob data from my API, converting it to a String using Buffer, and then adding it to an Array. This Array is used to populate the F ...

javascripttypescriptreact-nativeaxiostsx

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

javascriptjqueryhtmlcss

Tips on locating information within a pre-existing GET array with parameters provided

Apologies for the unclear title. I am currently utilizing a category chooser that pulls categories from an API. The process involves fetching a list of categories, filtering out their names, and presenting them in the category chooser. Upon clicking submit ...

javascriptjqueryarraysjsonapi

Simple method for detecting collisions between objects by projecting their shapes onto one

For the past few days, I've been delving into the world of Vectors and doing some research, but I'm still struggling to fully grasp the mathematics involved. In my code, I have two AABB's. When they collide, I want the method to return a Ve ...

javapushcollision-detectionprojectionaabb

How can I effectively assign model data to a service property in an AngularJS controller?

I have established a service to facilitate the sharing of data/state across multiple controllers. One of the controllers updates certain properties within the service using scope data through a save function. The updated data is then accessed by other cont ...

javascriptangularjsangularjs-scopeangularjs-serviceangularjs-controller

exploring the capabilities of sockets in PHP, reminiscent of the functionality found in Node.js

I recently downloaded and tried out a basic chat app with Node.js: https://github.com/socketio/chat-example The app is functioning properly. The server-side code is quite straightforward: var app = require('express')(); var http = require(&ap ...

javascriptphpnode.jswebsocketsocket.io

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

In what way does the map assign the new value in this scenario?

I have an array named this.list and the goal is to iterate over its items and assign new values to them: this.list = this.list.map(item => { if (item.id === target.id) { item.dataX = parseFloat(target.getAttribute('data-x')) item.da ...

javascript

Exploring the capabilities of NodeJS together with the fetch function of Backbone

I have a code snippet for the front-end using fetch: var MyModel = Backbone.Model.extend(); var MyCollection = Backbone.Collection.extend({ url: '/questions', model: MyModel }); var coll = new MyCollection(); ...

javascriptnode.jsbackbone.js

The search results fail to show the required information

I am trying to retrieve data from an API based on a search query. When the user enters the name of the film they are looking for and hits enter to submit the form, the matching films should be displayed on the screen. However, my console is showing errors ...

javascriptreactjsreact-hooks

Unable to activate Knockout data-bind using jQuery

I'm developing a plugin using jQuery and knockout.js. Currently, I have a scenario where I need to manipulate radio buttons with knockout data-bindings. However, I've encountered an issue when trying to uncheck a radio button by clicking another ...

javascriptjqueryknockout.jsknockout-2.0knockout-mvc

Obtaining a state hook value within an imported function in React

In order to access a value from the state hook stored in a special function, it is straightforward to do so in a functional component. For example, this can be achieved in App.js like this: import React from 'react'; import { Switch, Route, with ...

javascriptreactjs

Node.js cannot access the uploaded image data as it has been defined as undefined

I have encountered an issue while sending an image file through ajax to my Node.js server. Upon attempting to view the file data, it returns 'undefined'. Here is a snippet from my app.js file: var express = require("express"); var app ...

javascriptnode.jsexpress

encountering difficulties when trying to install npm packages in node.js

Starting out with Node.js and new to installing packages like express.js and underscore.js using NPM. However, every time I attempt to install using the following commands: npm install express, npm install underscore I keep encountering errors. Please ...

javascriptnode.jsnpmpackageinstallation

Troubleshooting issue with the spread operator and setState in React, Typescript, and Material-ui

I recently developed a custom Snackbar component in React with Material-ui and Typescript. While working on it, I encountered some confusion regarding the usage of spread operators and await functions. (Example available here: https://codesandbox.io/s/gift ...

javascripthtmlreactjstypescriptmaterial-ui

Is it possible to execute a REST call in JavaScript without utilizing JSON?

(I must confess, this question may show my lack of knowledge) I have a basic webpage that consists of a button and a label. My goal is to trigger a REST call to a different domain when the button is clicked (cross-domain, I am aware) and then display the ...

javascriptresthttp-get

Looking to make some changes to the javascript countdown script

Hello, I have come across a JavaScript countdown timer code on stackoverflow that seems to be the perfect solution for my countdown timer project. The current code counts down from 30 minutes to 1 minute and then starts over again. However, it provides the ...

javascriptjqueryajax

The process of setting up a carousel for tables using jQuery

I can successfully implement jquery for an image carousel, but now I need to find a way to create a sliding table format. Any assistance on this matter would be greatly appreciated. Here is the code I currently have: <ul> <li><a style= ...

javascriptjqueryhtmlcsscarousel

How to direct all wildcard paths to a particular route in Next.js

I currently have a single landing page application built with nextJs. I am wondering if it is possible to redirect all paths to specific routes, similar to how we do it in react-router. How can I achieve the same functionality in nextJs? <BrowserRou ...

javascriptreactjsnext.js

What is the best practice for updating state immutably in React using Redux and Redux Toolkit?

As I delve into learning Redux, I've come across a method called addPosts which allows me to add posts to my list. Here's how I'm implementing it: import { createSlice } from "@reduxjs/toolkit"; const initialState = [{ number: 1 } ...

javascriptreactjsreduxreact-reduxredux-toolkit