What is the best way to trigger a function upon the completion of an interpolation using tween.js?

I have an array named mesh with 10 individual meshes stored in it.

console.log(mesh.length) // -> 10;

My goal is to animate a scale change for each mesh by assigning a new scale value to them. To achieve this, I utilize a for loop in combination with the tween.js library:

for (var i in mesh){
  new TWEEN.Tween(mesh[i].scale).to({ x: 4, y: 4 }, 1000).start();
}

However, I am in search of a way to execute a function once all tweens have finished. Specifically, I want to display:

console.log('all interpolations are completed');

Can you provide guidance on how to accomplish this task?

javascriptthree.jstween.js

Answer №1

If you are searching for the specific function, it is 

tween.onComplete(onCompleteCallback)
.

For instance, in your code snippet:

new TWEEN.Tween(mesh[i].scale)
    .to({ x: 4, y: 4 },  1000)
    .onComplete(function(){
        //your callback
        })
    .start();

Update: in your current project, when all tweens have the same duration and share the same onComplete callback in a loop, it is more efficient to only call it once. Here's how you can optimize it:

//inside the loop
var tween=new TWEEN.Tween(mesh[i].scale).to({ x: 4, y: 4 },  1000);
if( i === 0 ) tween.onComplete(onCompleteCallback});
tween.start();

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

How can one elevate the properties of each item's sub-structure to the root level in an array containing object items?

I am working with an array containing objects, each with a specific structure... [{ user: { /* ... more (nested) user data ... */ }, vacation: { id: 'idValue', name: 'nameValue', startDate: 'dateValue', }, }, ...

javascriptarraysobjectdata-structuresmapping

the function does not wait for the DOM content to finish loading

As I execute the code, an error occurs stating that setting innerText of Null is not allowed. I understand that this is because my function runs before the DOM is completely loaded, but I am unsure of how to resolve this issue. Attempts have been made usi ...

javascripthtmlreactjsdomasync-await

In JavaScript, the input box is set to automatically capitalize the first letter, but users have the ability

How can I automatically capitalize the first letter of a user's name input, but allow for overrides like in the case of names such as "de Salis"? I've read on Stack Overflow that CSS alone cannot achieve this with text-transform:capitalize;, so ...

javascriptjqueryinputcapitalize

Show and conceal columns in HTML with the help of JavaScript

I need help with a webpage where I want to display a table with 2 columns and two rows (header and body). My goal is to use JavaScript to control the visibility of these 2 columns. The decision to show or hide the columns should be based on the values ...

javascripthtml

Navigating a parameter within an AngularJS directive

I am currently developing a directive that acts as a wrapper for the freebase search widget using jQuery. This is my first attempt at creating a directive and I have encountered some challenges. Here are the functionalities I am aiming for: 1. The ability ...

javascriptangularjsangularjs-directivefreebase

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

I have successfully implemented a Google sign-in button in my Angular application following the example provided in Display the Sign In With Google button: <div id="g_id_onload" class="mt-3" data-client_id="XXXXXXXXXXXX-XX ...

javascripttypescriptexpressoauthjwt

Tips for boosting the tabindex in a React search result list with ul-li elements

Implementing search results using ul li: <ul className="search-result"> <li tabindex="1">title here...</li> <li tabindex="2">title here...</li> <li tabindex="3">title here... ...

javascripthtmlcssaccessibility

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

[Hey there!][1] Encountering this TypeScript error message: { "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: { image: string; title: string; text: string; }; 1: { ...

javascripthtmlcssreactjstypescript

JavaScript obtain scroll position of a child element

I have a setup that looks something like the following: <div> <div id="scrollID" style="height:100px;"> content here </div> </div> <script> document.getElementById("myDIV").addEventListener("touchstart", m ...

javascripthtmlcssangularjs

JavaScript function to toggle the visibility of navigation with a click of a button

I'm attempting to create a functionality in my code where the Open navigation button hides when the side navigation opens upon clicking. The desired behavior is for the openNav button to be hidden when it's clicked and then shown again when close ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the most efficient method for delivering a script along with the initial index.html file?

Currently, I have my JavaScript code inline in the index.html file, but I want to move it to a separate file. <script> ... my code </script> After doing some research, I found that there are server side includes which seem outdated. There are ...

javascriptnode.jsexpresswebpack

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax

Creating a loop in a column-based carousel without using JavaScript

I'm currently working on developing a carousel using JavaScript or jQuery. I've attempted the code snippet below, but I'm having trouble getting it to display in 3 or 4 columns. While I understand that Bootstrap can handle this easily, I&apo ...

javascriptjqueryhtmlcsscarousel

What is the reason behind the ability to access the result of a redux call "immediately" by wrapping it into a promise?

Currently, we are operating in a Redux (with thunk middleware) / React environment. The piece of code below is causing some issues: onMyClick = () => { this.props.mySynchronousActionWhichWillCreateNewReducerState(); this.setState(...my state ch ...

javascriptreactjsredux

Issue with Cube Camera functionality

Having recently delved into the world of javascript and three.js, I've been attempting to create a "chrome material" for the frame of a stool model I loaded. Despite my efforts and extensive research, I can't seem to get the cube camera working t ...

three.jscamera

Guide on integrating Select2 with webpack

I recently acquired the select2 node module with this command: npm install select2 After adding it to my app.js: require('select2')($); Although no errors appear when I use webpack, upon opening the application, I encounter: Uncaught TypeEr ...

javascriptnpmwebpackjquery-select2

What could be causing the issue of req.body being undefined within the destination function of Multer's diskStorage?

I'm currently utilizing Multer for managing file uploads within my Express.js application. However, I've encountered an issue when attempting to access the req.body values in the destination function of Multer's diskStorage option – it con ...

javascriptnode.jsmongodbexpress

What advantages does incorporating a prefix or suffix to a key provide in React development?

Is there any advantage to adding a prefix or suffix to the key when using an index as a key in React (in cases where no other value such as an id is present)? Here's an example: const CustomComponent = () => { const uniqueId = generateUniqueId( ...

javascriptreactjs

Sending requests across domains from HTTPS to HTTP with callback functionality, and reversing the process

Prior to our conversation, I had created it using Flash. I uploaded a special file (crossdomain.xml) on the server side (https), while the Flash component was placed on the http server. Although they belong to different domains on the https and http serv ...

javascriptphpxmlhttprequestcross-domain

Altering the status of a property in an object, at a specific position within a collection of objects, contained within another object?

Currently using React and having some trouble with the setState hook to update a value deep within an object structure ...

javascriptreactjsreact-hooks