Using Three.js raycasting to determine the intersection point's coordinates

Hey there! I'm working on a project involving a plane and raycasting. What I'm trying to achieve is to obtain the coordinates of the intersection point on the plane. Any help would be appreciated, thanks!

(Just to clarify, I changed the color as a test to confirm that the raycast was functioning properly.)

This is the code snippet I am currently using:

      raycaster.setFromCamera( mouse, camera );

      //find objects intersecting with the picking ray
      var intersects = raycaster.intersectObjects( scene.children );

      for ( var i = 0; i < intersects.length; i++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 );

      }

Thanks in advance for any assistance provided! Best wishes, Keegan.

Answer №1

Whenever you employ the Raycaster tool, remember that the value stored in intersects[ i ].point is a Vector3() object that denotes the precise location of intersection in global coordinates.

For further insights, take a look at what other data is provided by intersects[ i ] within the developer console.

Version r.72 of three.js

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

Problem with Bootstrap Datepicker click functionality

I am currently utilizing the bootstrap datepicker along with bootstrap-rtl. The problem I encountered was that I had two fields, one for the date and one for the name. The datepicker would not appear until I clicked on the date input first, then on the na ...

Javascript is unable to find the ID of an HTML form

Struggling with a basic HTML form and a JavaScript form validator that aims to verify input in the "first name" field. However, I'm having trouble retrieving the first name form value to validate it properly in JS. Below is the relevant HTML code sni ...

Hiding Modal Box Upon User Login: A Step-by-Step Guide

After a user clicks the login button in my navigation, a modal box pops up. However, once the user logs in, the modal box does not disappear. How can I hide or remove the modal box when users click on the login button? This code snippet is from Home.vue: ...

Comparison between JavaScript Promise .then(onFulfilled, onRejected) and .then(onFulfilled).catch(errorFunc) in handling asynchronous operations

As I was reviewing promises, I had a question about the order in which the .then/catch calls are executed when using the code below. Are the catch calls being placed at the end of the queue stack? I already have a clear understanding of the distinction bet ...

Any tips on how to retrieve the data from an AJAX request using vanilla JavaScript?

After successfully implementing my first AJAX call last week, I am now faced with a new challenge. This time, I need to not only change something onSuccess but also access the returned data. <script type="text/javascript"> function showMessage(j ...

Retrieve the Date information and transfer it to another page using a combination of jQuery, JavaScript, and PHP

I feel defeated trying to solve this problem. Can anyone offer assistance in figuring this out? I've spent an entire day debugging with no success. I have two PHP files, index.php and home.php. In the index.php file, I include the Date range picker, ...

Choose a cell from a separate column within a React application

Currently, I've been developing a puzzle game using React JS. My goal is to be able to choose one cell in each column, but I haven't been successful in achieving that yet. You can find the code sample here. Any assistance you can provide would be ...

Data within an array can become compromised when passing through a complex series of nested asynchronous arrow

This discussion thread delves into the intricacies of sync versus async operations and offers potential solutions. However, despite implementing one of the suggested solutions, I continue to encounter errors. I believe I have reached my limit in understand ...

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

Is it possible to automatically move to a specific division after pressing a button?

My goal is to make the page smoothly scroll to #news .section-wrap every time a user clicks on .paging-navigation a. I attempted to add the line of code below, but unfortunately, it's not working as expected. Can you help me identify what I'm doi ...

Using a relative Div-container for qTip2's content placement

Is it possible to specify a relative div to be utilized as content for qTip2? Check out this fiddle demonstrating the issue: https://jsfiddle.net/0p1mgdse/ content: { text: $(this).parents(".item").find('.qtip-content-container') }, Unfortu ...

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

I'm facing difficulty with this task - when hovering over elements, an active class should be added to them. However, when moving the mouse to another section, the active class should remain on the last element hovered. Additionally, the first block s ...

Is it possible to modify the colors within a JavaScript string?

I am currently working on creating a multi-timezone clock that will be shown in a web browser in kiosk mode. The basic code was taken from and the kiosk setup from: and then customized into: However, I am struggling to change the color of each timezon ...

Modifications made in ajax success do not appear on the page without a manual refresh

I have a JavaScript AJAX block that performs some operations and then updates a text box on my webpage. $.ajax({ type: "POST", url: "/update_page/", data: JSON.stringify({'itemId': parseInt(item_id)}), cache: false, success: ...

Retrieve the last six elements from the array in JavaScript after the original array has undergone filtering

I'm currently working with an array that filters out today's games and retrieves the first 6 items. However, I now want to retrieve the last 6 items from the filtered array. Here is what I have tried: fixtures.filter(fixture => { return f ...

Dynamically Returning Multiple Functions in Javascript: A Comprehensive Guide

I apologize if my question was unclear. Let me explain the issue I am facing. I am currently working on implementing a search functionality in a table, where users can search in specific columns. Currently, I am manually checking which checkboxes are sel ...

Cannot assign argument of type 'string | undefined' to parameter expecting type 'string'. Typescript is being strict

While attempting to update an object using the SDK and having 'strict' mode enabled in typescript, I encountered the following error: const offer = client.offer(oldOfferDefinition!.id); await offer.replace(newOfferDefinition); error TS2345: Argu ...

Is there a way to successfully include an apostrophe in a URL?

I am currently utilizing Node.js: var s = 'Who\'s that girl?'; var url = 'http://graph.facebook.com/?text=' + encodeURIComponent(s); request(url, POST, ...) This method is not functioning as expected! Facebook seems to be c ...

"Components in Pusher and Vue.js seem to be stuck in the channel even with Vue Router in

I've integrated Pusher with Laravel Echo to establish presence channels for specific areas within my application. All navigation on the front-end is managed through Vue Router. I'm facing an issue where Vue Router loads components based on route ...

Comparing WebSockets and XHR for transmitting data

Looking to optimize the architecture of a web application using Node.js, the goal is to efficiently send medium-sized files to the client from a gallery. Each gallery item should be delivered to the user as quickly as possible in binary form. The file size ...