What steps are involved in transitioning from one mesh to another?

I am working with mesh1 and Mesh2, both of which have extrusion properties.

mesh1 ->100 vertices
mesh2 ->200 vertices

In my programming code, I perform the following operations:

mesh1.geometry.verticesNeedUpdate = true;
mesh1 = Mesh2;
mesh1.geometry.computeBoundingBox ();

This successfully updates mesh1 in my original code. However, I want to ensure that there is a smooth transition rather than an abrupt change as mesh1 becomes the geometry of Mesh2.

Typically, I utilize tween.js library for animations. For instance:

new TWEEN.Tween (mesh1.scale) .to ({x: 1, y: 1, z: 1}, 1000) .start ();

But I am unsure how to create an animation in this scenario. I aim to smoothly transition or animate the changes from the vertices of mesh2 to mesh1 without any sudden shifts being visible.

javascriptthree.jstween.js

Answer №1

If you want to achieve this, the morphTarget feature is your best bet. Essentially, you have multiple sets of vertices with the same length but different positions. By adjusting the morphTargetInfluences, you can smoothly transition from one set of vertices to another.

You can find more information on this in the Threejs Geometry docs.

.morphTargets

An array containing various morph targets. Each target is defined by a JavaScript object:
{ name: "targetName", vertices: [ new THREE.Vector3(), ... ] } The number and order of vertices in each morph match that of the primary vertices.

For a practical demonstration, check out this illustrative example and examine its source code for deeper insights.

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

Unable to modify information retrieved from API. Error: Unable to assign to property that is set to read-only

Using an API call, I retrieve some data. getPosts(postRequest: PostRequest): void { this._postService.getPosts(postRequest).subscribe(result => { const postList = result as PostList this.posts = postList.posts }); ...

javascriptangularjsangularapi

Spin and flip user-submitted images with the power of HTML5 canvas!

I am currently working on a profile upload system where we are implementing image rotation using the HTML5 canvas object with JavaScript. Although the uploaded image is rotating, we are facing issues where parts of the image are being cut off randomly. So ...

javascriptjqueryhtmlhtml5-canvas

Tips for transmitting one or multiple data using jquery.ajax

I found this code on stackoverflow and it is working well for uploading multiple files. However, I am facing an issue where I cannot send additional parameters along with the file upload. Despite trying various methods, I have been unsuccessful in sending ...

javascriptphpjqueryhtmlcodeigniter

What is the best approach for assigning a value to the action URL in el-upload?

<el-upload class="upload" action="http://127.0.0.1:5000/upload/email" :file-list="fileList" > Utilizing the Element UI library, I am attempting to pass an email value to the 'action' URL in the format of base_ ...

javascriptvue.jsdata-bindingelement-ui

Perform an asynchronous request using a data variable retrieved from a previous asynchronous request

I have a function using ajax to parse XML data. Here is an example: $.ajax({ type: "GET", url: "the.xml", dataType: "xml", success: function parseXml(data){ $(data).find("ITEM").each(function(){ var x = $("URL", this).t ...

javascriptjqueryajaxjson

How come my form submission continues to refresh the page?

I am new to the world of ajax and have a basic understanding of jQuery. Nonetheless, I am facing challenges while testing a simple ajax script. I have gone through similar questions for help, but unfortunately, I haven't been able to find a solution y ...

javascriptphpjqueryajax

Choose a date range from the date picker

I am currently attempting to combine two dates using a rangepicker. Below is the command used to select the date: Cypress.Commands.add('setDatePickerDate', (selector, date) => { const monthsShort = [ 'janv.', 'févr.& ...

javascripttypescriptcypresscypress-custom-commands

Selenium javascript troubleshooting: encountering problems with splitting strings

Hello, I am new to using selenium and encountering an issue with splitting a string. <tr> <td>storeEval</td> <td>dList = '${StaffAdminEmail}'.split('@'); </td> <td>dsplit1 </td> < ...

javascriptseleniumselenium-ide

Ways to verify whether the checkboxes within a gridview have been selected

enter code hereMy Gridview has five checkboxes in each row with options 'NO', 'YES', 'NA', 'NA/U', and 'REPEAT'. I am looking to enable a button if any of the checkboxes among 'NO', 'YES&apos ...

javascriptc#-4.0gridview

Toggle the font weight in a text area by clicking a button

I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...

javascriptjqueryhtmltoggleclass

Creating a curved exponential data set with specific endpoints and a set number of data points

Struggling to create a function that involves math skills, I could really use some assistance. The task is to design a function that takes data points x and generates an array of size x with exponentially increasing values from 0 to 100. It would be ideal ...

javascriptmathaudiopseudocodeexponential

Animate a nested element dynamically with jQuery

Whenever I click on the "view" button, I am dynamically adding data to a div. This feature is working perfectly fine. However, I wanted to improve it by adding another nested dynamic element. The problem I'm facing now is that when I try to expand al ...

javascriptjquery

Unable to access class instance from event handler in Angular 2 and Typescript

In the scenario I'm working on, I need to dynamically add multiple instances of a child component to a template. Each of these child components emits a 'select' event, and each one requires a different event handler within the parent compone ...

javascriptangularjstypescriptangular

Passing parameters through the URL with Angular's ui-router

Instead of passing parameters when changing pages like this: $state.go('index.my_route', {my_param : value}); Is it possible to pass the parameter in the URL string while still using $state.go? For example: $state.go('index.my_route?my_pa ...

javascriptangularjsroutesangular-ui-router

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

Struggling with lag in MaterialUI TextFields? Discover tips for boosting performance with forms containing numerous inputs

Having some trouble with Textfield in my MateriaUI project. The form I created has multiple inputs and it's a bit slow when typing or deleting values within the fields. Interestingly, there is no lag in components with fewer inputs. UPDATE: It appear ...

javascriptreactjsmaterial-ui

eval concealing program in JGraph compared to obfuscation and packing

Many times when the topic of eval is brought up, the response is always the same - avoid using eval. However, I believe there is a valid reason for eval to exist. Nevertheless, there are numerous pitfalls to consider. Regarding jgraph - why do they incorp ...

javascripteval

What is the best way to style output in jQuery for a specific div?

I have developed a tool for creating forms, but I am struggling to format the output neatly like pretty print. I have tried using \n and pre tags as well. allCont += "<label>"+insCleaned+"</label><input type='text' name= ...

javascriptphp

Shifting JSON Arrays in JavaScript - Changing Order with Ease

Consider the following JSON data: [ { "name": "Lily", "value": 50 }, { "name": "Sophia", "value": 500 }, { "name": "Ethan", "value": 75 } ] I am looking to verify and organize it in ...

javascriptjson

The menu isn't displaying properly and the onclick function seems to be malfunctioning

My onclick event is acting strange. Whenever I click the mobile menu in the menubar, it just appears briefly like a flash and then disappears. It's not staying stable on the screen. The classes are being added and removed abruptly when I try to click ...

javascriptcss