How can I modify the mesh structure in Three.js?

Having two meshes, mesh1 and mesh2, each with the same number of vertices and extrusion.

mesh1 = 5000 vertices.
mesh2 = 5000 vertices.

I transfer the vertices from mesh2 to mesh1. Then I execute:

mesh2.geometry.verticesNeedUpdate = true;
mesh2.geometry.vertices = mesh1.geometry.vertices;

Although this updates mesh2's vertices quickly without any visible animation.

I wish to see an animated transformation as mesh2 gradually morphs into mesh1, depicting the change in vertices.

In my attempts to achieve this, I have used "Tween.js" for animations like position and color. However, utilizing it to visualize the vertex transformations between mesh2 and mesh1 hasn't yielded successful results:

new TWEEN.Tween( mesh2.geometry.vertices ).to( mesh1.geometry.vertices, 1000 ).start();

Unfortunately, this method did not produce the desired outcome. Please excuse any language barriers in my explanation.

javascriptthree.jstween.js

Answer №1

It is evident that the current approach is ineffective, mainly because each time you update the mesh vertices, you must also remember to set 

geometry2.verticesNeedUpdate = true;
for all corresponding frames.

--

To address this issue more specifically, I suggest incorporating 

.onUpdate(function() { geometry2.verticesNeedUpdate = true; })
into your tween animation process.

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

Move the focus to the previous input field by removing the key

I have created a phone number input with 10 fields that automatically skip to the next field when you fill in each number. However, I would like to be able to go back to the previous field if I make a mistake and need to delete a digit. How can I achieve ...

javascriptjqueryhtmlcssinput

Can data from an Angular app be accessed by an external JavaScript code within the same project?

I've been thinking about a theoretical scenario that luckily I haven't encountered yet. Imagine I have an Angular Project compiled in My PROJECT FOLDER. <br/> Inside this PROJECT FOLDER, there's another JAVASCRIPT FILE external to ...

javascriptangulartypescript

Utilizing the setState method within an 'async function with arguments' for handling onClick events

In my next.js app, I have a file named "temp.js" located in the /pages directory. This is the code inside temp.js: import React from 'react'; import {Button} from '@mui/material'; class SomeClass extends React.Component{ state={ ...

javascriptreactjsnext.js

Steps for generating random numbers from a set of given numbers

I am faced with a scenario where I need to generate random numbers based on a given set of numbers. For instance, if I have an array num=[23,56,12,22], I would like to obtain a random number from this array. ...

javascriptrandomnumbers

Retrieve the parent document for every item within a Firebase collection group

Transitioning from an SQL background to document storage, I am currently navigating through a Firebase database structure that looks like this: John (doc) Restaurant Reviews (collection) Review 1 (doc) Review 2 (doc) Paul (doc) Restaurant Reviews ...

javascriptangularfirebasegoogle-cloud-firestore

Exploring the Power of 2D Arrays in JavaScript

Hey there! I'm having trouble defining a 2D array in JS. Two errors are getting in my way and I can't figure out what's going wrong. i is generated by a for loop - it's defined. Even when I try replacing i with 0, the same error occurs. ...

javascriptarraysmultidimensional-arraybbc-microbit

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

I encountered a "ReferenceError: db is not defined" while trying to call a function in Express.js with MongoDB intergr

The structure of the code is as follows: var express = require('express'); var router = express.Router(); var mongo = require('mongodb').MongoClient; function getData(){ db.collection("collection_name").find({}).toArray(function (er ...

javascriptnode.jsmongodbexpress

Substitute HTML data attributes

Hey everyone, I'm wondering how to change a data attribute in my code. For example, I am currently using a script for a video background, but I want to replace the video with a lighter version when viewed on a mobile device. In my JavaScript file, I h ...

javascriptjquerycss

Ensure that only valid numbers can be inputted into an HTML number type field

My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...

javascripthtmlangular

Basic jQuery template design

Currently, I am developing a user interface that allows users to add or delete items with a similar layout. The process starts with one item and by clicking 'add', more items can be added. These items come in several different types. My current ...

javascriptjqueryhtml

Having trouble adding the Vonage Client SDK to my preact (vite) project

I am currently working on a Preact project with Vite, but I encountered an issue when trying to use the nexmo-client SDK from Vonage. Importing it using the ES method caused my project to break. // app.tsx import NexmoClient from 'nexmo-client'; ...

javascripttypescriptvitepreactvonage

Issue with Javascript/Jquery functionality within a PHP script

I have been attempting to incorporate a multi-select feature (view at http://jsfiddle.net/eUDRV/318/) into my PHP webpage. While I am able to display the table as desired, pressing the buttons to move elements from one side to another does not trigger any ...

javascriptphpjqueryhtmlcss

What are the implications of an unidentified callback function with parameters?

Check out this snippet: const fs = require('fs'); fs.readFile('foo.txt', 'utf8', (error, data) => { if (error) { throw new Error(error); } console.log(data); }); Can you figure out where the anonymous callback is recei ...

javascriptnode.js

Leveraging the power of JavaScript to retrieve data from BigQuery

Having just started my journey with JavaScript and Google BigQuery, I am seeking help due to my lack of experience in these areas. My goal is to create a javascript code that can fetch data from one of the public databases on BigQuery. I came across a solu ...

javascriptjquerygoogle-bigquery

Resolving the Issue with onClick Events in Closures

Secrets of the JavaScript Ninja provides an interesting example: HTML <button id="test">Click me!</button> JavaScript var button = { clicked: false, click: function() { this.clicked = true; console.log("this:", this, ...

javascript

Exploring the capabilities of xhr2 using pure javascript

Currently, I am attempting to utilize xhr2 in order to read through a json file. Despite my efforts in researching various methods to accomplish this task, none have proved successful thus far. The function featured below my require statements is the one t ...

javascriptjsonnode.js

Download function in Express.JS failing to retrieve file

I have been working on a Node.JS server using Express to generate and download PDFs based on user input. Previously, I used the <form action=""> method to call my API, but switched to Axios due to Netlify not supporting NuxtAPI. The program ...

javascriptnode.jsexpressnuxt.js

Angular 6+ Unveiled: The Magic of Transparent Wrapper Components

One standout feature of Vue.js is the ability to dynamically assign new attributes to a specific element within the template, which is referred to as Transparent Wrapper Components https://i.sstatic.net/XrUjI.png In this example, I am able to pass all ex ...

javascriptangularvue.js

Is UseEffect selectively triggering specific components?

I am attempting to ensure that each time my search field changes, the code within useEffect is executed. Strangely, only console.log('hi') seems to be running while the other code is not. I am struggling to understand why useEffect is choosing t ...

javascriptreactjsreact-hooks