Determine if a line intersects with a mesh in a three.js environment

Within the scene, there are several cylinders present. Upon user interaction with specific points, I am generating a line (THREE.Line) connecting those points. However, I am facing an issue with checking for intersections between the line and the cylinders (THREE.Mesh).

The current approach seems to be ineffective.

myLine.intersectObjects(arrayOfCylinders, true)

Would it be feasible to create a ray along the line? If so, I could utilize the following:

myRay.intersectObjects(arrayOfCylinders, true)

Thank you!

javascriptthree.jslineintersectionmesh

Answer №1

According to the Three.js documentation:

Ray(origin, direction)

origin -- Vector3 represents the starting point of the Ray.

direction -- Vector3 indicates the direction in which the Ray is pointing.

Assuming you have pointA and pointB as the user's clicks, you can:

(pseudo code)

origin = pointA
direction = (pointB-pointA).normalize()
myRay = THREE.Ray(origin, direction)

You can achieve the same functionality using a THREE.Raycaster()

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

Tips to avoid the page from scrolling to the top when the menu is opened

Whenever a user taps the menu button on the page, a full-page menu opens. However, there is an issue - the main content page automatically scrolls to the top. Can you provide suggestions on how to prevent this from happening? I have already looked into a s ...

javascripthtmlcss

Making a POST request to a Next.js API route results in a 500 Internal Server Error being sent back

Check out the code in createComment.ts file, which serves as a Next.js api route: import type { NextApiRequest, NextApiResponse } from 'next' import sanityClient from "@sanity/client" const config = { dataset: process.env.NEXT_PUBLI ...

javascriptreactjsnext.jshttp-status-code-500

The Firebase child_changed event may occasionally be missed at random intervals when the browser tab is inactive

I am currently developing a real-time application where one user can enter the app, and all other users connected to that session will receive notifications or payloads of what that user is entering. Below is the Firebase child_changed listener that every ...

javascriptangularjsfirebaseionic-frameworkfirebase-realtime-database

Using `v-if` with a Vuex getter

Currently, I am utilizing a vuex getters called isLoggedIn to verify whether a user is logged in or not. <div v-if="isLoggedIn" class="ml-2 py-2 group relative">...</div> data() { return { isLoggedIn: this.$store. ...

javascriptvue.jsvuex

Issues with ontimeupdate event not triggering in Chrome for HTML5 audio files

After creating an HTML5 audio element and setting a listener for when its time updates, I have run into an issue where the ontimeupdate function does not fire in Chrome, including Chrome on Android. The audio plays without any issues in other browsers. va ...

javascriptandroidhtmlgoogle-chromeaudio

Create a bookmarklet for Webdriver when initializing the driver, or store the bookmarklet in your saved bookmarks, all done without the need to

Need Help Adding Custom Bookmarklet to Webdriver I am looking for a way to include a custom bookmarklet (a bookmark that consists of pure JavaScript code) in a webdriver so it appears on the bookmarks toolbar. I would like to achieve this either during th ...

javascriptpythonseleniumgoogle-chromebookmarklet

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

javascripthtmljquerycssfrontend

Visualization of extensive datasets in JavaScript

I'm currently developing a dashboard in JS for displaying sales data plots to users. Can anyone recommend a JavaScript library that meets the following criteria: Capable of plotting a large number of points (ex: 100k or more) Interactive functional ...

javascriptreactjsplot

If the server goes offline, it will not produce an error message

Running a factory in AngularJS angular.module('app.services',[]) .factory('myFactory', function($http){ return { getData: function(){ return {animal: 'dog'} }, isUser: function() ...

javascriptangularjs

What steps can be taken to keep specific parts of an instance geometry from disappearing when the center position is no longer visible?

Currently, I am delving into the exciting world of webgl, threejs, and glsl shaders. The scene displayed below showcases my endeavor to manipulate instanced geometry. There are 3 clusters of "grass" in the scene, which are essentially comprised of instance ...

three.js

Utilizing jQuery's .ready() method within the body section of a document to modify the onload event following the printing of the body

Recently, I took over a tabbed page that uses multiple queries to determine which tabs should be displayed. My goal is to add some PHP logic that will automatically set focus on a specific tab when the page finishes loading. I'm wondering if it&apos ...

javascriptjquery

Create copies of a single array containing objects in various new arrays

I need to create duplicates of an array of objects multiple times, as I require each one for different uses. if(!this.tempLookups){ for (let count = 0; count < this.dates.length; count++) { this.tempLookups[count] = this.lookups[key]; } ...

javascript

Is there a way to retrieve the selected value from a dropdown menu using vue.js?

I have a parent Vue component structured like this: <template> <form> <div class="row"> <div class="col-md-4"> <form-select id="color" name="color" :data="color">Color</form-select&g ...

javascriptdata-bindingvue.jsvuejs2vue-component

Refresh the angular list filter by clicking on it

I'm struggling with updating an Angular list after the filter is changed. Below is the HTML code I am using: <li ng-repeat="items in list | filter:filterList" style="list-style-type:none"> {{items}} </li> Additionally, here is the o ...

javascriptjqueryangularjs

ffmpeg is successfully converting less than half of my images into a video

Utilizing ffmpeg to convert a series of images into a timelapse video has been seamless when executed through the command line. ffmpeg -r 3 -i /var/folders/qj/n910kwdj4gvbmy_z2ffc5lcc0000gp/T/tmp-22129yvIsrbso4TEu/image%03d.jpg -s hd1080 -vcodec libx264 t ...

javascriptnode.jsffmpegfluent-ffmpeg

Using Ajax to populate two dropdown menus by utilizing the selected value from a third dropdown menu

I have an HTML page that includes 3 drop-down boxes. Whenever I make a selection in one of the boxes, the chosen value is sent to the server, and the server should return the values for the other 2 drop-down boxes. How can I dynamically populate the other ...

javascriptajaxselectcombobox

Filtering nested objects in JavaScript based on a specific property value

I have a list of objects nested in JavaScript and I need to filter them based on a specific search string and property value. My goal is to extract only the categories with children that are not hidden and contain at least one profile with a name matching ...

javascript

Alternative method to jQuery's "find" selector

$('.wrapper a').filter('a'); //returns all anchors I am trying to find a way to select all anchor elements using a specific selector. The issue is that the find method only looks at descendants, so I need an alternative solution. Any s ...

javascriptjquery

Navigate through a list of data in JSON format

After successfully implementing a jQuery AJAX call, I encountered difficulty in parsing the returned value. Working with a MySQL database, I am returning a PHP array() to my jQuery AJAX function using echo json_encode($reservationArray); Upon appending th ...

javascriptphpjqueryajaxjson

Breaking down an array in Node.js

After web scraping, I retrieved an array structured like this: array: [ 'line1', 'line2', 'line3', 'linen'.. ] My task now is to insert this data into a MySQL table. The challenge is that every 10 lines of ...

javascriptarraysnode.jsloops