What is the best way to determine the exact location of a vertex in three.js?

My understanding is that

var point = object.geometry.vertices[i];
will provide the relative position for the x, y, and z of the point within the object's geometry.

Is there a way to obtain the absolute position if the object has been translated, rotated, or scaled?

Answer №1

To obtain the global coordinates of a vertex, you can use the following method:

const vertex = new THREE.Vector3(); // initialize the vector

const attribute = obj.geometry.getAttribute( 'position' );

vertex.fromBufferAttribute( attribute, idx );

obj.localToWorld( vertex );

Using three.js version r151

Answer №2

Recent updates in Three.js (v50 and above) include a convenient feature integrated into the THREE.Object3D class. To obtain the global coordinates of a local instance of THREE.Vector3 named 'vector', simply utilize the 'localToWorld' method:

object.localToWorld( vector );

Similarly, there exists a 'worldToLocal' method for converting global coordinates to local coordinates, which involves a slightly more complex mathematical process. To translate a global 'vector' into the object's local coordinate system:

object.worldToLocal( vector );

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

JavaScript is not being loaded onto the client by Express

I am looking to incorporate requireJS into my client code. Here is my file structure: ProjectRoot |-server.js |-public/ |-index.html |-js/ |-app.js |-lib/ |-require.min.js |-underscore.js |-backbone.js ...

Click on the input field to give it focus before adding a class during the page

Alright, so here's the deal - I have an input field with the class .cf-se-input. I want this field to be focused using jQuery as soon as the document is ready. Additionally, if the field is focused either by the user clicking on it or through jQuery f ...

Is there a way to compare data before and after revalidation using useSWR?

With the use of Next.js and through the implementation of useSWR, data is fetched from an endpoint every 30 seconds using an automatic revalidation interval (https://swr.vercel.app/docs/revalidation#revalidate-on-interval). Within the retrieved data, there ...

Transform a complex PHP array into JSON format using JavaScript

I have a three-tiered PHP array with both numeric indices and key-value pairs. I would like to convert it to JSON, and reiterate through the object list. How would I do this? The PHP array is called $main_array, and appears as: Array( [0] => Arra ...

Web Scraping ASU Courses using Node.js

I'm a beginner when it comes to Node.js, so please forgive me if I sound confused. Currently, I am attempting to scrape course information from ASU's course catalog (https://webapp4.asu.edu/catalog/) using tools like Zombie, Node.IO, and the HTT ...

Angular.js has a unique filter that allows users to customize the date format to their preference

My upcoming event is happening on "endDate": "2014-11-30 01:00:00.0", in JSON format. I want to display it as 30 Nov 2014. I attempted to display it using: {{ phone.endDate | date:'medium' }} within an HTML document. Unfortunately, it is sti ...

Using TypeORM to Retrieve Data from Many-to-Many Relationships with Special Attributes

Hey there, I'm diving into the world of TypeORM and could really use some guidance. I've been attempting to set up many-to-many relationships with custom properties following the instructions provided here However, I've run into a few iss ...

What are the limitations of using a JS file within an Angular application?

I am struggling to integrate some js methods from a file into an angular application. Unfortunately, the browser is unable to recognize the js file. I have tried following the guidelines in this SO post, but the browser still cannot locate the file in the ...

Why does the content not appear again when switching between tabs?

Hello! I'm facing an issue with toggling between two sets of content on my page. Initially, the correct content shows up, but when I switch tabs, the new content doesn't appear. Furthermore, if I click back to the first tab, that content disappea ...

What is the best way to retrieve a MariaDB query result using Node.js?

I've been delving into the world of Node.js to enhance my web development skills, particularly in retrieving data from a mariaDB using SELECT queries and converting it into JSON for client requests. Despite scouring the internet and stackoverflow, I h ...

Ways to identify an element within a webpage

I'm currently working on creating a chrome extension that can detect the presence of specific elements on a webpage. The goal is to have this extension automatically run every time a new page is opened and display a popup message if the element is fou ...

Bootstrap 4 Card Body Spinner Overlay with Flex Alignment

Seeking to center a spinner both vertically and horizontally within a bootstrap 4 card body. Despite trying my-auto, justify-content-center & align-items-center, it seems like I'm missing something. I've double-checked the display types and ...

What causes the _.sum() function in lodash to not work with objects in Vuejs?

I've encountered an issue where using Vuejs and Lodash in conjunction with a computed property that calculates the sum of a property in a collection results in unexpected behavior. Instead of summing the values, it seems to concatenate the string [obj ...

What is the best way to update the switchery checkbox after it has already been initialized?

I have set up the switchery using the code snippet below. var ss_is_schedule_edit = document.querySelector('.ss_is_schedule_edit'); var mySwitch = new Switchery(ss_is_schedule_edit, { color: '#8360c3' }); However, I am unable to toggle ...

Enhance Website Speed by Storing PHP Array on Server?

Is there a way to optimize the page load time by storing a PHP array on the server instead of parsing it from a CSV file every time the page is reloaded? The CSV file only updates once an hour, so constantly processing 100k+ elements for each user seems un ...

Unique trigger for clicking events with customizable widgets in JQuery

I'm in the process of developing a jquery widget that functions similarly to a menu bar, featuring two buttons - ButtonOne and ButtonTwo. With my HTML code and associated styles in place, I've been focusing on creating a "hello world" widget. / ...

Sliding in a strange way

Are you experiencing a strange behavior with the slider on your website? When you hover over the image, the caption at the bottom slides up and on mouseout it slides down again. It works perfectly on . However, when navigating to portfolio via the menu on ...

When running the command `npm start`, an error message is generated

Hey everyone, I've been trying to learn some basic AngularJS 2.0 skills through a tutorial. Unfortunately, when I tried running the command npm run start, it didn't work as expected. I'm currently using Git Bash on Windows 10 OS. If you hav ...

The issue of the menu in the <Select /> component unexpectedly closing is caused by the MaterialUI -withStyles higher-order component (HOC)

Issue Description When utilizing the <Select /> component with the multiple attribute, users should be able to select multiple options without the dropdown menu closing. This functionality works as intended when using the <Select /> component ...

Is there a way to update the dictionary in the context processor without having to reload the page?

I have implemented a custom context processor that returns the value of "unread_messages_count". However, when I try to update this value on the template using the following JavaScript: var update_message_count = setInterval(function(){ ...