The global coordinate system is used to determine the direction of raycasting, not the local coordinate

Using the raycasting method to detect various colored strips on both sides of the track, I am able to keep my car object in position by calculating the distance. However, the issue lies in the fact that the ray always points in a constant direction in the global coordinate system and does not change with the movement or rotation of the car object. If the ray direction were in the reference frame of the car, this problem could be solved, but I am unsure how to achieve this. Currently, my code looks like this:

var ray = new THREE.RayCaster(car.position, new THREE.Vector3(-1,0,0),0,50);

The car's movement is limited to the X-Z plane.

Can anyone provide a solution to this problem?

javascriptthree.jsraycasting

Answer №1

When performing ray-casting, ensure that the vector used is in world-space for accurate results.

Assuming the car is a direct child of the scene, and not another rotated object, create a unit vector that aligns with the car's heading in the world coordinate system:

let vector = new THREE.Vector3(-1, 0, 0);

Next, apply the same rotation to this vector as the car has:

vector.applyQuaternion(car.quaternion);

UPDATE: Revised for compatibility with three.js version r.66

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

How can I extract the text enclosed in <li> tags using JavaScript?

Can someone help me with retrieving the text content of li tags? I managed to get a list of lis, but I'm having trouble assigning the text content to my country object. Snippet var lis = document.getElementById("navbar").getElementsByTagName("l ...

javascripthtmlhtml-lists

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

javascripthtmlasp.netpath

Changing the structure of a JSON array in JavaScript

I'm currently developing an ExpressJS application and I need to send a post request to a URL. My data is being retrieved from a MS SQL database table using Sequelize, and the format looks like this: [ { "x":"data1", "y":& ...

javascriptnode.jsjsonexpress

sending a collection of elements to a jQuery function

I am puzzled by why this function is not working as expected when passing an array of items to it. My intention with the for-loop is to change the status of the child ctrl element to either '+' or '-'. An error occurred: Uncaught Typ ...

javascriptjquery

Steps to retrieve the central coordinates of the displayed region on Google Maps with the Google Maps JavaScript API v3

Is there a way to retrieve the coordinates for the center of the current area being viewed on Google Maps using JavaScript and the Google Maps JavaScript API v3? Any help would be greatly appreciated. Thank you! ...

javascriptgoogle-maps-api-3

The lack of synchronization between the updated state in one function and its counterpart is causing discrepancies, resulting in the incorrect information being sent to the API

Whenever I press the following button: <Button onClick={(e) => { addToCard(item); handleprisma(); }} > add to cart </Button> This function is meant to add the item to my shopping cart: const addToCard = (item) => { co ...

javascriptreactjsnext.js

Unable to forward with POST request in Node.js

I have a button on the front end that allows users to update their profile photo using the Cloudinary API. When the button is clicked, a Node.js POST request is sent with the user's data to query the database and update the profile photo URL. The func ...

javascriptsqlnode.jscloudinary

What is the process of intersecting a 3D object in THREE.js when provided with a coordinate pair (X, Y)?

Is it possible to determine if points within a scene with (X, Y) coordinates intersect a specific object using the RayCaster in Three.js? Additionally, how can we find out the updated (X, Y, Z) coordinates after the intersection has occurred? ...

three.js

"Looking for a way to automatically close the <li> tag in Vuejs when clicked outside

clickOutside: 0, methods: { outside: function(e) { this.clickOutside += 1 // eslint-disable-next-line console.log('clicked outside!') }, directives: { 'click-outside': { ...

javascriptvue.js

Typescript is throwing an error stating that the type 'Promise<void>' cannot be assigned to the type 'void | Destructor'

The text editor is displaying the following message: Error: Type 'Promise' is not compatible with type 'void | Destructor'. This error occurs when calling checkUserLoggedIn() within the useEffect hook. To resolve this, I tried defin ...

javascripttypescriptpromisetypescript-genericsreact-typescript

Transmit JSON data from the client to the MarkLogic Server device

Hello everyone, hope you are all doing well. I am a beginner in Marklogic and recently managed to set up a rest api on my local machine. Following the given example, I used curl to send/create documents in the database. Now, my query is how can I access/ ...

javascriptjsoncurlnosqlmarklogic

Drop-down menu for every individual cell within the tabular data

I'm working with a large HTML table that looks like this: <table> <tr> <td>value1</td> <td>value2</td> </tr> <tr> <td>value3</td> <td>value4 ...

javascripthtmlcss

Steps for retrieving the identifier of a duplicated element

I've copied an element and changed their IDs, but I'm having trouble fetching the IDs of the cloned elements in jQuery. Can someone assist me with this issue? The HTML view source code is provided below: <table id="dataTable" borde ...

javascriptjqueryajaxasp.net-mvcentity-framework

Unable to dismiss message in Django

I'm a beginner in Django and I recently followed a tutorial to add message alerts to my code. The alerts are displaying correctly, but unfortunately, I am having trouble closing them using the 'x' button. https://i.stack.imgur.com/BQS1S.png ...

javascriptpythonhtmldjango

AngularJS textbox failing to recognize line breaks as expected

I am struggling with the following HTML code: <div class="form-group"> <div class="input-group col-sm-12"> <label for="" class="control-label">Comments</label> ...

javascriptphphtmlangularjs

How can ReactJS continuously dispatch promises after a set interval?

Within my React component, I am invoking an action in ComponentDidMount() as shown below: componentDidMount() { const { actions } = this.props function save_project_continuously() { console.log("inside") actions.sa ...

javascriptreactjses6-promise

serializeArray encounters difficulty in locating certain input elements

I've created this HTML layout: <div class="col-md-12"> <div class="form-group"> <label>Mini description (displaying the latest added destinations and meta description)</label> <textarea class="for ...

javascriptjqueryhtml

Is there a way to adjust the state value in Pinia within a Vue3 component test, and have an impact on the component?

When testing the component using pinia with vue-test-utils, I encountered difficulty in modifying the state value stored in pinia. Despite trying multiple methods, I was unable to achieve the desired result. The original component and store files are provi ...

javascriptvue.jsjestjsvue-test-utilspinia

Having trouble removing or adding a class to an HTML element?

I have a collection of three colored buttons. My goal is to allow users to select one button at a time, triggering it to be highlighted while the others are unselected. Each button corresponds to an object with a property called isSelected that can be set ...

javascripthtmlcss

When transferring information from the UI controller to Javascript, there is a risk of losing certain data points in the process

My UI controller is returning data with two objects of the same type, each representing a certain entity. Both objects have values assigned to them, as shown when fully expanded. https://i.sstatic.net/Txhwh.png However, when inspecting the JavaScript, th ...

javascriptc#asp.net.netjson