Updating the geometry of vertices after rotating or moving an object

I've been experimenting with using position and rotation values to transform a mesh, but now I'd like to modify the geometry vertices directly in x, y, and z coordinates while freeing or resetting the rotation and position values. I'm not quite sure how to do this...

So far, I have tried:

myobj.applymatrix();
myobj.matrixAutoUpdate = false;
myobj.verticesNeedUpdate;

However, these changes only affect the appearance of the object and not the internal geometry itself.

Do I need to manually apply the geometric transformation to the vertices?

Any assistance on this matter would be greatly appreciated!

javascriptthree.js

Answer №1

In order to modify the vertices of your geometry, follow this approach:

mesh.updateMatrix(); 
mesh.geometry.applyMatrix( mesh.matrix );
mesh.matrix.identity();

After that, make sure to reset the position, rotation, and scale properties back to their original values:

mesh.position.set( 0, 0, 0 );
mesh.rotation.set( 0, 0, 0 );
mesh.scale.set( 1, 1, 1 );

Using three.js version r.85

Answer №2

When constructing a terrain mesh with PlaneGeometry, incorporating hills using a heightmap, and then placing trees randomly on vertices after adjusting the ground's rotation

ground_mesh.rotation.set(-Math.PI / 2, 0, 0);

I encountered an issue where the vertices of the mesh geometry did not rotate along with the mesh, resulting in trees being positioned incorrectly relative to the ground. To resolve this, I discovered a simple solution by rotating the mesh itself using

ground_mesh.geometry.rotateX(-Math.PI / 2)

This adjustment ensured that everything, including gravity collision detection and the positioning of random vertices, behaved as expected.

The documentation advises against using rotateX within the rendering loop.

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

Harnessing the power of express middleware to seamlessly transfer res.local data to various routes

I am in the process of implementing a security check middleware that will be executed on the specific routes where I include it. Custom Middleware Implementation function SecurityCheckHelper(req, res, next){ apiKey = req.query.apiKey; security.securi ...

javascriptnode.jsexpress

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: ...

javascriptvue.js

Is it possible to transfer a JSON object from Silverlight to JavaScript?

Is it possible to pass a JSON object directly from Silverlight to JavaScript, or does it have to be serialized first? ...

javascriptsilverlightjsonsilverlight-3.0

Discover the method for concealing a button using ng-show and ng-hide directives

<div> <div class="pull-right"> <button type="button" data-ng-click="editFigure()" id="EditFigure">Edit Figure </button> <button type="button" data-ng-click="figurePreview()" id="PreviewFigure">Figure Previ ...

javascriptangularjs

How does SWR affect React state changes and component re-rendering?

I am currently utilizing SWR for data fetching as outlined in the documentation: function App () { const [pageIndex, setPageIndex] = useState(0); // The API URL incorporates the page index, which is a React state. const { data } = useSWR(`/api/data? ...

javascriptreactjsnext.jsswr

Angular JS: Saving information with a promise

One dilemma I am facing is figuring out where to store data that needs to be accessed in the final callbacks for an http request. In jQuery, I could easily handle this by doing the following: var token = $.get('/some-url', {}, someCallback); tok ...

javascriptangularjs

Having trouble getting the onPress event to function properly on a custom button component in my React Native application

As a React Native beginner, I am currently working on a project where I am trying to create a custom button named "RoundedButton" using TouchableOpacity. However, when I attempt to trigger an event using onPress like , it does not seem to work for me. Here ...

javascriptnode.jsreactjsreact-native

Select2 version 4.0.3 encountering issues when trying to automatically populate additional select2 fields with data fetched through ajax

I'm encountering an issue with Select2. Essentially, I need to populate other form fields with data retrieved from Select2's Ajax search. Even after following an example found here: Select2 4.0 - Push new entry after creation I'm still un ...

javascriptjqueryajaxjquery-select2

Unable to launch webpack due to webpack not being detected

When attempting to start webpack, I entered the following command: npm run dev This was done in the command shell where my project and node_modules are located. Upon running the command, an error appeared in the terminal: > clear; npm run --silent so ...

javascriptnode.jsnpmwebpack

Allow for the ability to choose a specific option for every individual line that is echoed in

I have researched several similar questions, but none of them address exactly what I am attempting to achieve. My goal is to use AJAX to fetch a PHP page that will display the contents of a folder on my server. Currently, the files are being listed line by ...

javascriptphpjqueryajaxloops

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

Tips for effectively utilizing the useDraggable and useSortable hooks within the dnd-kit library

I'm currently working on developing a basic calculator using React and dnd-kit. The idea is to have draggable elements in the calculator that can be sorted within a droppable area with smooth animation effects. However, I've encountered an issue ...

javascriptreactjsdrag-and-dropdraggablednd-kit

Use JavaScript to sift through an array and exclusively retrieve items that match a specific value

I am working with an array of objects that contain a phase key, and I want to filter out only the ones that have a specific phase value. Additionally, I need to map some other key/value pairs into the final return. Here is my current code: phaseToBlocks ( ...

javascriptarraysfiltervue.jsecmascript-6

Positioning tooltip arrows in Highcharts

I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...

javascriptjqueryhtmlcsshighcharts

What is causing the scripts to fail when I attempt to press a button?

Clicking on the button is supposed to slowly reveal phone numbers on the page. Here are the HTML Codes: <span id="show-phone-numbers" class="btn btn-success"> <i class="fe fe-phone-call"></i> Show Phone Nu ...

javascriptjquerybootstrap-5

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

javascripthtmljquerycssdjango

Loading message displayed in web browsers by banner rotation system

I'm currently working on a banner rotator function that seems to be showing a "loading" message continuously while running. Here is the code snippet for reference: var banners = ['../Graphics/adv/1.gif','../Graphics/adv/2.jpg']; / ...

javascripthtmlcssbrowser

Steps to invoke a function in a PHP file from an external JavaScript file

Can anyone assist me with calling the function below in my PHP file? function update_hidden_input(saved_tokens, hidden_input) { var token_values = $.map(saved_tokens, function (el) { //alert(el[settings.tokenValue]); return el[ ...

phpjavascriptjqueryfacebook

Invoke a function from a popup window, then proceed to close the popup window and refresh the parent page

When a link in the parent window is clicked, it opens a child window. Now, when the save button is clicked in the child window, I need to trigger a Struts action, close the child window, and reload the parent window. function closeChildWindow(){ document. ...

javascriptjavajspstruts-1

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...

javascriptjqueryhtmlcsstwitter-bootstrap