Coordinates of a vertex's position within a grouped Object3D Geometry

For the past 7 hours, I have been diligently exploring all possible combinations based on the solutions provided in this thread:

How to get the absolute position of a vertex in three.js?

My current task involves identifying the exact positions of vertices within the geometry of a plane that is nested inside an Object3D located within a group.

While obtaining the global coordinates of the Object3D poses no challenges, the vertices present various obstacles. They either seem to provide only their local coordinates, generate incorrect numbers unrelated to their actual positions, return undefined results, or fail to locate certain elements when queried.

I would greatly appreciate any assistance or insights offered on this matter.

javascriptthree.js

Answer №1

If you're looking to take a quicker route, try using the localToWorld() method on the Object3D object. It's important to ensure that the matrix is kept up-to-date, which usually occurs automatically during rendering. As a precaution, consider making a duplicate of the Vector3. 

yourObject3d.updateMatrixWorld()
yourObject3d.localToWorld( new THREE.Vector3().copy(yourGeometry.vertices[someVertex]) )

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

Instructions for developing an HTML element slider using mouse dragging

I've come across plenty of slider plugins that either only allow clicking to view the next image, or if they do support mouse drag or touch capabilities, they are limited to images. Does anyone know of a plugin or method to create a mouse drag slider ...

javascriptjqueryhtmlcssweb-applications

Mastering the manipulation of month names inflection for optimal Angular date localization

Lately, I encountered an issue where certain parts of my Angular application require the date to be displayed in the format: MMMM yyyy. This also applies to components within the Angular UI Bootstrap framework. The challenge arises from the fact that some ...

javascriptangularjsdatelocalizationangular-bootstrap

Difficulty in Verifying ECDSA Signatures Across React and Python Environments

Currently, I am tackling a project that requires me to create an ECDSA signature in a React application and then validate it in a Python backend. Although the signature generation and validation processes work perfectly within their respective environments ...

javascriptpythonreactjscryptographyecdsa

Displaying and Concealing Table Rows using Javascript

I am working with an array of prices that are being displayed in a table using a foreach loop. The goal is to hide specific rows in the table based on certain conditions. The $status variable is set to "YES" if the price is => 30, and "NO" if the price ...

javascriptphphtml

Difficulties with integrating tooltips into SVGs

Being a minimalist, I am facing restrictions while working on a website. I desire interactive tooltips to appear when users hover over specific sections of my SVG. However, I also want to incorporate this interactivity within the SVG itself. The challenge ...

javascriptcsssvg

What sets Koa apart when it comes to understanding the distinctions among await next(), return await next(), return next(), and next() in middleware?

The provided information explains the function of using 'await next()' in middleware to pause the middleware and initiate the next middleware downstream until all middlewares have completed execution. Once this happens, the process will start in ...

javascriptnode.jspromiseasync-awaitkoa

Simplest method for defining an associative array

Looking to create an array in the format shown below: [0: 0, 1: 1, 2: 2] This is achieved using the following code snippet: var arr = []; for(i=0; i<3; i++){ arr[i] = i; } Upon execution, my array appears as follows: [0, 1, 2] The values with ...

javascriptarrays

Issue with updating dropdown values in real-time in React

I am a beginner with React and I have a question regarding fetching dropdown values from the backend. Despite using async-await functions, the list is not getting populated with items. Any assistance in this matter would be greatly appreciated. Here is th ...

javascriptreactjsasync-awaitaxiosdropdown

Issue with JavaScript: Required accessToken parameter missing in ReactJS

Issue with Contentful.js When running a React project using `npm start`, an error related to `contentful.js` is displayed. Why does this package show these errors? I have attached the error screenshot for reference. How can I resolve this issue? .env fil ...

javascriptnode.jsreactjsnpmaxios

What is the best way to set up a function to automatically execute on a specific date and time

I am facing a challenge with my website where users can send themselves messages at a chosen date and time. However, I am unsure how to trigger the message delivery at the specified time. While I am aware of CronJobs, they seem more suitable for recurring ...

javascriptnode.jsexpressscheduled-tasks

Move the <div></div> element to the bottom of the webpage and center it

My HTML includes a <div>...</div> section that serves as a toolbar. Is there a method to position this section at the bottom of the webpage (document, not viewport) and align it to the center? ...

javascripthtmlcssajax

Protractor - Resolving as pending promise when executed

I have been working on creating a function that can search through an array of elements and return the first element that meets certain criteria. Here is my test code that works as expected: element.all(by.css('_cssSelector_')).filter(function( ...

javascriptangularjsselenium-webdriverpromiseprotractor

Organizing pictures by category

I am currently working on creating an interactive image gallery with sorting options based on different categories such as land, sea, animals, and more. I have created a small example to demonstrate my concept. My objective: is to allow users to select a ...

javascripthtmljquerycsssorting

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

In my Angular 4 application, I encountered an issue with a date retrieved from an API call. The date is in the format '1990-03-31T23:00:00-06:00' and when attempting to create a Date object and retrieve the month using getMonth(), it returns the ...

javascriptangulardate

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

javascripthtmlcss

How can I combine various array values of equal length using a delimiter to create one final array?

I am trying to combine the values from 3 separate arrays, all of which have the same length. var title = ['title 1','title 2','title 3']; var description = ['description 1','description 2','descri ...

javascriptjqueryarrays

Is there a way to utilize redux to trigger the opening of my modal when a button is clicked?

I'm facing a challenge with opening my modal using redux when clicking <CheckoutButton/>. Despite my efforts, the modal keeps appearing every time I reload the browser. I've reviewed my code but can't pinpoint the issue. What am I doin ...

javascriptreactjsdebuggingreduxreact-redux

Methods for invoking a function from a separate .js file within React Native Expo

I'm new to using React and I've come across a challenge: In my Main.js file, there is a button: import * as React from 'react'; import { StyleSheet, Text, View, SafeAreaView, Pressable, Alert } from 'react-native'; import { M ...

javascriptreactjsreact-nativeexpo

Ways to detect scrolling activity on the v-data-table module?

Are you looking for a way to detect scrolling events on the v-data-table component in Vuetify framework? I am referring to the scenario where the table has a fixed height, causing the table body to scroll. <v-data-table fixed-header :height=400 : ...

javascriptvue.jsvuetify.jsv-data-table

Incorporating dynamic numerical values into image names within a Vue JS application

I have linked an image with the following code <img title="head" :src="availableParts.heads[selectNextHeadIndex].src"/> This image is called from a JSON file: { id: 1, description: 'A robot head with an ...

javascriptvue.jsvuejs3