Three.js: Obtain the latest vertex positions using morph targets

I have successfully implemented some morph targets in my project:

View the working morph targets here (Don't forget to use the slider control to see the morph effect in action)

However, I am facing an issue where I cannot access the updated positions of the vertices after the morph. In the example linked above, you can see that the y-coordinate of the first vertex of the cube is not updating as expected!

// I'm struggling to update the Y vertex!
   elInfo.innerHTML = geometry.vertices[0].y;

Is there a way to retrieve the new positions of the vertices post-morph? I've tried various approaches and experimented with different flags, but so far, I haven't had any success.

Any help or suggestions would be greatly appreciated!

Please keep in mind that this example has been simplified for demonstration purposes. The actual project where I require the vertex data is more complex.

javascriptthree.jsvertices

Answer №1

When it comes to updating morphs, the GPU takes precedence over the CPU. This means that in order to determine the new vertex position, you will need to perform the same calculation on the CPU as the GPU is executing.

If you're looking to calculate raycasting on the CPU, the Mesh.raycast() method handles this process and can serve as a useful example for reference.

Below is a basic template you can use. Keep in mind that you may need to customize it for your specific application, as this template is specifically designed for a simple fiddle scenario:

var morphTargets = mesh.geometry.morphTargets;
var morphInfluences = mesh.morphTargetInfluences;

var vA = new THREE.Vector3();
var tempA = new THREE.Vector3();

var fvA = geometry.vertices[ 0 ]; // the vertex to transform

for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {

    var influence = morphInfluences[ t ];

    if ( influence === 0 ) continue;

    var targets = morphTargets[ t ].vertices;

    vA.addScaledVector( tempA.subVectors( targets[ 0 ], fvA ), influence ); // targets index must match vertex index

}

vA.add( fvA ); // the transformed value

Check out the fiddle link below for a working example:

fiddle: https://jsfiddle.net/3wtwzuh3/3/

Using three.js version r.75

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

Ways to place an item within the field of view

I'm currently exploring ways to position an object within the camera's field of view if it extends beyond the edges. I came across this helpful resource: Three.js - Width of view. However, after inputting the values, it provides a result of 5.12 ...

three.js

Ways to verify the presence of an item in a MonoDB array

My MongoDB model looks like this: const userSchema = new Schema = ({ name: { type: String }, company: [ companyId: { type: String, }, movies: [ { genre: { type: String, enum: [ ...

javascriptnode.jsmongodbmongoosemongodb-query

Having trouble interpreting PHP-generated JSON data in JavaScript

I have a PHP script that outputs a JSON string. <?php $arr = array( 'id' => '1', 'myarray' => array( array('a' => 'a1', 'b' => 'b1', 'c' => 'c1', & ...

phpjavascriptjson

In JavaScript, private variables are not included in the JSON.stringify output

Imagine creating a class called Rectangle with private fields like width and height, initializing them in the constructor. However, when calling JSON.stringify on an instance of this class, it returns an empty object without including the private members. ...

javascriptjsonclassprivateclass-fields

Processing one file to submit two forms to the database in Express

I am facing an issue with two forms on one form.hbs page using the same process.js file. Each form is processed by a different submit button for separate occasions. The first submit button works correctly, processing the data in the process.js file and se ...

javascriptjquerynode.jsexpresshandlebars.js

Thumbnail image preview fails to display after preloading an image in dropzonejs

Currently, I have a form where users can input their name and upload an image (logo). The client side language being used is AngularJS with dropzonejs as the image upload library. When the user clicks on the 'Edit' button, I want them to see a pr ...

javascriptimageangularjsuploaddropzone.js

What other options are available for achieving the same functionality as FormData.delete() given its low level of support?

When building my website, I utilized the FormData.delete() method to exclude specific form fields before sending data to the server. However, I encountered a setback as this method is not supported on various browsers, including Safari. Therefore, I am in ...

javascriptjquery

Issue with CKEditor5 Link popup not displaying in both Bootstrap 5 modal and RSuite library modal in React

React: How to troubleshoot CKEditor5 Link popup not appearing in a modal using either Bootstrap 5 or rsuite library? Seeking advice on resolving this issue. Your help is appreciated! ...

javascriptreactjsbootstrap-5

Access the value of a JavaScript global variable using Selenium in Python

I need to access a value from a global variable in JavaScript: clearInterval(countdownTimerTHx); var saniye_thx = 298 // <--- Variable here function secondPassedTHx() { https://i.sstatic.net/odIbh.png My goal is to retrieve the value " ...

javascriptpythonselenium

pass information between sibling directives

I am currently experiencing an issue with an AngularJS directive. I am trying to send an outlet object from directive1 to directive2, both of which share the same controller scope. I have attempted to emit an event from directive1 to the controller, broadc ...

javascriptangularjsangularjs-directiveangularjs-scope

Displaying selected list item while concealing the original

I have a dropdown menu with several options. What I am looking for is to have it so that when we click on the drop down, a list of choices appears. Then, when we select an option from the dropdown, the original selection should be replaced with the one th ...

javascriptjqueryhtmlcss

I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Seeking a functional web application in Tizen that can scroll a div using the rotating bezel mechanism. I have dedicated several hours to getting it to work without success. I keep revisiting the same resources for the past three days: View Link 1 View Li ...

javascriptrotationtizen

Waiting for data to be passed from a parent component within a method

I have a situation where I need to make an API call in my layout and send the received data as an object to my component. The problem arises because the object is empty when the method is called inside the mounted() function. Therefore, I want to execute ...

javascriptvue.js

Implementing default header and footer with Angular's ui.router

When dealing with ui.router modules, I have identified three different methods for setting a default header and footer for every view: DEFAULT HEADER <CONTENT> DEFAULT FOOTER 1. Using ng-include - inserting your header/footer in the initial .html ...

javascriptangularjsangularjs-directiveangular-ui-routerangularjs-include

Make sure to pay attention to the messageCreate event within a direct message channel on discord

I've come across this question repeatedly, and despite trying numerous suggestions, I still can't seem to make it work. Currently, I'm resorting to logging the messageCreate event, but unfortunately, that isn't yielding any results. Any ...

javascriptnode.jsdiscord.jspartials

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...

javascriptjqueryhtmlcss

Looking for assistance with PHP and JavaScript integration

I am struggling with an update-like function that I need help with: <html> $result = mysql_query("SELECT *FROM tbl_a LEFT JOIN tbl_b lass ON tbl_b.b_id=a.class_id LEFT JOIN category ON category.category_id=tbl_a.category_id WHERE list ='{$id}&a ...

phpjavascriptsql

Issues with tracking changes in Vue.js when using reactive variables

After triggering a click event, I am attempting to choose a message from a json file. However, I am encountering an issue where the first click does not seem to select anything. Upon the second click, the selected messages are duplicated, and this pattern ...

javascriptjsontypescriptvue.js

Is it necessary to reset (local storage, session storage) once the countdown timer reaches zero?

I have successfully implemented a countdown timer using session storage in my code. However, I am looking to enhance its functionality further by: Clearing the local session if the user leaves the site before the countdown timer finishes. Automatically c ...

javascripthtmltimerlocal-storage

What causes the discrepancy in results between Javascript sha1 and PHP5 sha1 when generating hashes for utf-8 strings?

I'm facing an issue with utf-8 characters in a string. The PHP sha1 and Javascript sha1 are generating different codes for the same string "abc艾". Can anyone assist me with this? Thank you in advance. PHP code: $str = "abc艾"; $result = sha1($st ...

phpjavascriptsha1