Choosing a line object with the mouse in Three.js

How can I select a line object in threeJS?

I attempted to use raycaster for this purpose.

http://jsfiddle.net/nelsonlbtn/z43hjqm9/43/

Upon running the test, I encountered the following error:

three.min.js:598 Uncaught TypeError: d.distanceTo is not a function
    at pb.distanceSqToSegment (three.min.js:598)
    at pa.raycast (three.min.js:650)
    at xe (three.min.js:295)
    at uf.intersectObjects (three.min.js:863)
    at HTMLDocument.moveMouse ((index):107)

Any suggestions for a solution to this issue?

javascriptthree.js

Answer №1

The main issue at hand was the manual creation of geometry points for the line. This approach lacked the necessary method for calculating distance, which is readily available with the THREE.Vector3 constructor.

Instead of crafting your own objects, utilize the THREE.Vector3 constructor as it includes the essential distanceTo method in its prototype. By doing so, you ensure accurate calculations for your coordinates.

... within your init function ...
// instead of
/* p1 = {
    x: 0,
    y: 0,
    z: -100
  }
  p2 = {
    x: 100,
    y: 0,
    z: 0
  } */

  // opt for this
  p1 = new THREE.Vector3(0,0,-100)
  p2 = new THREE.Vector3(100,0,0)
 ... additional init function code ...

Although challenging, it is feasible to interact with the line as needed.

Explore this example on JSFiddle

Answer №2

In the realm of three.js, points are established in the following manner:

p1 = new THREE.Vector3( 0, 0, - 100 );
p2 = new THREE.Vector3( 100, 0, 0 );

For debugging purposes, utilize the un-minified version of three.js; for production, opt for three.min.js.

Check out the updated fiddle: http://jsfiddle.net/7s8vozyr/20/

Version of three.js being used: r.97

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

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

javascriptcssreactjstypescriptmaterial-ui

Transmitting information in segments using Node.js

Recently delving into the realm of nodejs, I find myself tackling a backend project for an Angular 4 application. The main challenge lies in the backend's sluggishness in generating the complete data for responses. My goal is to send out data graduall ...

javascriptnode.jsexpressstreaming

Declare React component as a variable

I'm facing a simple issue that I need to solve. After creating a React app using npx create-react-app, I designed a Map component which I integrated into my view with the following code: class App extends Component { render() { return ( ...

javascripthtmlreactjs

What advantages does utilizing NPM provide compared to directly incorporating the JavaScript library into an MVC project?

When working on an MVC project, I experimented with two different methods of including jQuery: I first downloaded the jQuery files and manually added them to the project, as shown here: https://i.sstatic.net/2TjqX.png I also tried using the bundle sett ...

javascriptjquerynpm

Seeking a proficient Cloud Code specialist skilled in JavaScript, focused on managing installations and channels

My experience with Javascript is limited, but as I work on my application, I realize the necessity of incorporating it into Cloud Code. I have a Parse class called Groups where I store group data including Name, Description, Users, and Requests. Name, Des ...

javascriptandroidparse-platformparse-cloud-code

Supplying information to my ejs template while redirecting

I am currently working on a feature that involves sending data from the login page to the home page when the user is redirected. This data will then be used in the home EJS file. Below is the code snippet I have implemented: module.exports = functio ...

javascriptnode.jsexpressnpmejs

The database is failing to reflect any changes even after using the db.insert function

I am currently working on implementing a forgot password feature in my express app using the node mailer package. This functionality involves sending a new password to the user's email and then updating the database with the new password. However, I h ...

javascriptnode.jsexpressnpmknex.js

Adding automatic hyphens in dates within React

My goal is to create a date field in React, similar to the one on this page, with the date format of yyyy/mm/dd. This is my current approach: const [date_of_birth,setDateofBirth] = useState(""); const handleChangeDOB = (e) => { let value = e.target ...

javascriptreactjs

Populating table with information stored locally

Hello there, I am currently working on a journal project where I am facing an issue with the getItem function of localStorage. Whenever I add entries to the table and refresh the page, all the entries disappear except for one row with default input values ...

javascripthtmllocal-storage

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

I need help redirecting to a new page upon button click using a JS function. The URL needs to include an email address parameter. <form> <input type="email" id="mail" placeholder="ENTER YOUR EMAIL ADDRESS" requir ...

javascripthtml

Simple method to toggle between elements using jQuery

After creating a script using jQuery to show/hide content when tabs are clicked (which also changes the color of the clicked tab), everything is functioning smoothly. However, I believe there may be a more efficient way to switch between content that allow ...

javascriptjqueryhtmlcsstabs

The jQuery validation feature is failing to function properly within a bootstrap modal

I'm facing an issue with the jQuery validation plugin in my express app sign-up form that uses Bootstrap for the front-end. Despite setting rules and messages for name, email, and phone number fields, the validation is not functioning correctly. Below ...

javascriptjquerynode.jstwitter-bootstrapexpress

Leveraging ternary operators within HTML elements

Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...

javascripthtmlvue.jsconditional-operator

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project. Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the fi ...

javascriptc#cssblazormudblazor

Define the content and appearance of the TD element located at the x (column) and y (row) coordinates within a table

In my database, I have stored the row and column as X and Y coordinates. Is there a straightforward way to write code that can update the text in a specific td element within a table? Here is what I attempted: $('#sTab tr:eq('racks[i].punkt.y&a ...

javascriptjqueryhtml

Is there a way to expand jQuery quicksearch functionality to include searching for words with accents?

Hello everyone, I'm currently working on the development of this website using jQuery isotope, WordPress, and jQuery quicksearch. Everything is functioning perfectly, but I would like to enhance its functionality. For example, when I type "Mexico," I ...

javascriptjquery-pluginsdiacriticsstring-comparisonaccent-insensitive

Observing exceptional inquiries

Can I check what requests Protractor is waiting for? I'm working on fixing inconsistent state testing, but it's difficult to determine if a button didn't initiate a response or if Protractor simply didn't wait. In short: How do I see t ...

javascriptangularjsseleniumprotractore2e-testing

Establishing the types of object properties prior to performing a destructuring assignment

Consider a scenario where a function is utilized to return an object with property types that can be inferred or explicitly provided: const myFn = (arg: number) => { return { a: 1 + arg, b: 'b' + arg, c: (() => { ...

javascripttypescripttypescript-types

How can I attach an event listener to each row in a table that is dynamically generated?

I am currently working on a table that is being populated using data from a JSON file. The number of entries in the JSON file can vary, resulting in different lengths for the table rows. Each row includes a bootstrap dropdown button with links for actions ...

javascriptjqueryhtmlbootstrap-4

Easy way to eliminate empty elements following a class using jQuery

I'm encountering a situation where I have a group of elements following a specific class that are either empty or contain only white space. <div class="post-content"> <div class="slider-1-smart"> --- slider contents --- < ...

javascriptjqueryhtmlcsswordpress