Retrieve the location of a rotated entity in Three.js

When working in Three.JS, I have the ability to rotate an object around its origin. However, if I rotate a line, for example, the line rotates but its vertices do not update to reflect their new positions. Is there a way to apply the rotation matrix to the vertex positions in order to determine the new position of each point? For instance, if I rotate a line with points at (0,0,0) and (0,100,100) by 45° on the x-axis, 20° on the y-axis, and 100° on the z-axis, how can I calculate the actual position of the vertices relative to the entire scene?

Any advice or guidance would be greatly appreciated.

Answer №1

Indeed, 'entire scene' refers to the world position.

The THREE.Vector3() object includes an applyMatrix4() method,

You can achieve similar results as the shader by projecting a vertex into world space using the following code:

yourPoint.applyMatrix4(yourObject.matrixWorld);

To convert this into camera space, you can use the next snippet:

yourPoint.applyMatrix4(camera.matrixWorld);

In order to obtain screen coordinates ranging from -1 to 1:

yourPoint.applyMatrix4(camera.projectionMatrix);

You can access your point like so:

var yourPoint = yourObject.geometry.vertices[0]; //first vertex

Instead of performing these operations separately, you can combine the matrices. While untested, the concept would be something like this:

var neededPVMmatrix = new THREE.Matrix4().multiplyMatrices(yourObject.matrixWorld, camera.matrixWorld);
neededPVMmatrix.multiplyMatrices(neededPVMmatrix, camera.projectionMatrix);

For a detailed explanation of what is happening behind the scenes, I recommend this tutorial.

Alteredq has provided comprehensive information about three.js matrices in this post.

Edit

If you only require the rotation without translation, you must utilize the upper 3x3 portion (rotation matrix) of the model's world matrix. This process may be slightly more complex. Consider using the normalMatrix or converting THREE.Vector3() to THREE.Vector4() and setting .w to 0 to prevent translation.

Edit2

In case you need to move the line point in your scenario, instead of applying it to the particle, apply it to

var yourVertexWorldPosition = new THREE.Vector3().clone(geo.vertices[1]); //this represents your second line point, whatever you defined in your init function
yourVertexWorldPosition.applyMatrix4();//this transforms the new vector into world space based on the matrix you provide (line.matrixWorld)

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

breaking up string values in Node.js

I am currently facing an issue with splitting values from an array. Here is how the array looks: [ 'xs', 'small', 'medium' ] I am trying to rearrange them to display like this in my database: xs small medium Here is what I ...

What are the counterparts of HasValue and .Value in TypeScript?

There is a method in my code: public cancelOperation(OperationId: string): Promise<void> { // some calls } I retrieve OperationId from another function: let operationId = GetOperationId() {} which returns a nullable OperationId, operat ...

Struggling with transitioning from TypeScript to React when implementing react-data-grid 7.0.0

I'm trying to add drag and drop functionality to my React project using react-data-grid, but I keep encountering a "TypeError: Object(...) is not a function" error. I have a TypeScript version of the file in the sandbox as a reference, but when I try ...

Dealing with illegal characters, such as the notorious £ symbol, in JSON data within a JQuery

I'm encountering an issue with a textarea and the handling of special symbols. Specifically, when I use $('#mytextarea').val() to retrieve text that contains '£', I end up seeing the black diamond with a question mark inside it. T ...

Is it possible for a jQuery ajaxSuccess function to detect an AJAX event in a separate JavaScript file? If it is, what steps am I missing?

I've been attempting to initiate a function following an ajax event. I have been informed that despite the ajax event occurring in a different file (on the same server, if that makes a difference) and that the file is javascript, not jquery, "Ajaxsucc ...

Populate the present time according to the country chosen from the HTML dropdown menu

I need to populate a date-time field with the current date and time of a specific country when the user selects that country from an HTML drop-down. Can you please provide guidance on the different ways this can be achieved? Thank you in advance. ...

Access arrays/objects within main object using JavaScript's Object.keys()方法

Perhaps the title is a bit confusing, but I couldn't come up with a better way to phrase it. I have a function that determines the value of each property within a contact object and returns 'No Data' if the value is null/empty/undefined. Ho ...

Is a JavaScript variable automatically global if not declared with var?

Here is the code snippet from one of my files: function refreshGridSuccess(responseText, entity) { oTable = $('#dataTable').dataTable({ "sScrollX": "100%", In a different file, I have the following code: $('#d ...

Nightwatch.js - Techniques for waiting until an AJAX request is finished

Currently, I am relying on nightwatchJS for browser automation. A common issue I encounter is that much of the content on my webpage gets updated via ajax calls. To ensure accurate testing, I need a way to pause my testing until the ajax call returns resul ...

When using Next.js revalidate, an error may occur stating: "There are keys that require relocation: revalidate

I have been attempting to utilize the revalidate function in my code by following the example provided by Vercel. However, I keep encountering an error. Here is the snippet of code that I am currently using: export async function getServerSideProps() { c ...

List of items displayed in alphabetical order using the ng-repeat directive:-

I'm working with an ng-repeat block in the code snippet below. My goal is to have the placeholder [[THE ALPHABET]] render as a, b, c, d representing bullets for the list in their respective order. There will always be 4 values present. What would be t ...

Is the "as" decorator in Next.js Link no longer functioning properly with dynamic routes?

My route is dynamic: test/[id].js When a user clicks on a link to /test/1, Next.js successfully renders the correct page. The issue arises when I try to mask the /test/1 URL with something else. <Link href="/test/1" as="/any/thing/here ...

What is the best way to extract the value of the initial data object from a JSON response that contains multiple data objects with identical names?

Currently, I am trying to integrate a value from a JSON request into a source URL. The code snippet I have below demonstrates my attempt: function Source() { $.ajax({ type: "GET", dataType: "json", url: "https://api.hitbox.tv/media/video/chair ...

Tips for organizing a JSON object based on an integer column such as "3", "2", "5"

I am facing a challenge with sorting a JSON object that has a column containing numbers. The issue arises because the column is of string type. How can I sort string numbers in numerical order? var myArray = [{ name: 'David', total: "6" }, ...

My Ionic app displays a blank nested view

Below are the route configurations in app.js: .state('signup', { url: '/signup', templateUrl: 'templates/signup.html', controller: 'signupCtrl' }) .state('profile', { url: ' ...

Is there a way to use a script to search the Google API and receive the ranking position of a URL for various search terms

Is it feasible to create a script that utilizes the Google API to input a URL and a list of search terms, then retrieves the search position of each term for that specific URL? ...

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

For nearly a full week now, I've been plagued by a persistent issue! Here's the situation: I have 6 step tabs - step 1, step 2, and so on. Each tab has a CSS class called "locked" and "active." "Locked" - this style features top: 3em;, causing ...

Creating HTML or PHP pages using jQuery

Is it possible to generate a file using jQuery? I am creating a website maker. On the left side, I have a list of elements such as: ---------------------------------------------------------------- Elements Attri ...

"Utilizing JSON parsing in Node.js and rendering the data in a Jade template

I need assistance with parsing JSON and presenting the response in a tabular format using Jade. Can you help me display the key-value pairs in two separate columns? Node.js exports.postMQinput = function(req, res) { req.assert('name', 'Q ...

Utilize a WCF Service with HTML and JavaScript

FILE WebService.svc.vb Public Class WebService Implements IWebService Public Function Greetings(ByVal name As String) As String Implements IWebService.Greetings Return "Greetings, dear " & name End Function End Class FILE IWebServ ...