Learn how to create sequential animations for two objects with distinct animations using Three.js

As a beginner in 3D animation using Three.js, I have successfully created an animation for one object using the VectorKeyframeTrack function. Now, I am looking to animate two different objects separately, with one starting after the other has completed a certain number of loops. Currently, both animations play simultaneously and I am considering using setTimeout to delay the second animation until the first one completes its loop. Is there a more efficient way to achieve this?

const animationClip = new THREE.AnimationClip(null, 3, [track1]);
const animationClip1 = new THREE.AnimationClip(null, 3, [track]);
const animationAction = mesh.userData.mixer.clipAction(animationClip);
const animationAction1 = cube.userData.mixer.clipAction(animationClip1);

animationAction.setLoop(THREE.LoopRepeat, 4);
animationAction.play();
setTimeout(function(){
   animationAction1.setLoop(THREE.LoopRepeat, 4);
   animationAction1.play(); 
}, 6000);

Check out the live example on jsfiddle: https://jsfiddle.net/bpyLsfda/5/

javascriptthree.js

Answer №1

Is there a more efficient method?

A superior approach is to avoid using setTimeout() and instead attach an event listener to the initial animation mixer, monitoring for the finished event. Your updated code will resemble the following:

mesh.userData.mixer.addEventListener( 'finished', ( /*event*/ ) => {

    animationAction1.setLoop( THREE.LoopRepeat ,4 );
    animationAction1.play(); 

} );

The event is triggered upon the completion of playing an animation action. Furthermore, you can access the corresponding action from the event object by utilizing event.action.

https://jsfiddle.net/6hzr0a9v/

three.js R106

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

Creating the data type for the input file's state: React with Typescript

Encountering an error when attempting to define the type of a file object within state: Argument of type 'null' is not assignable to parameter of type 'File | (()=> File)'.ts. Currently working on an upload component that allows for ...

javascriptreactjstypescriptmaterial-uitypescript-typings

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascripthtmlcss

Is there a way for me to retrieve data from a v-for loop in VueJS with the Quasar Framework?

I am currently working on a q-markup-table code to display products based on a search query. I have successfully implemented a button that allows the user to select a row from the table, and once selected, the row data is sent to an array named "selected ...

javascriptvue.jsquasar

What is the process for setting a URL as the background image in CSS?

I am attempting to set the uploaded image as a background cover for a div using its URL, but so far I have been unsuccessful: function setImageBackground(input) { if (input.files && input.files[0]) { var reader = new FileReader(); re ...

javascriptjquery

Grunt integration for version control

After sticking to simple Html and Css for the longest time, I'm finally diving into JavaScript for a new project where I want to automate versioning. I've been following the SemVer Guidelines and my projects are currently versioned as "version": ...

javascriptgruntjssemantic-versioning

Improving Page Load Speed with HTML Caching: Strategies for Enhancing Performance when over half of the data transferred is for navigation menus

I manage a complex and expansive website that contains a significant amount of repetitive HTML elements such as the navigation menu and top ribbon. Loading a single page on my site can be resource-intensive, with up to 300KB of data required, half of whic ...

javascriptjqueryhtmlajaxcaching

The user score tracking database, cataloging personal scoring history

In my database, I have a table called User. Each user in this table has a field named score. I am looking to display how the score of each user has evolved over time. My dilemma is whether to store this score separately. Should I create a new database t ...

javascriptnode.jsmongodbdatabase

Deleting files with a dedicated function (Dropzone.js)

I need to implement functionality that removes the uploaded file when a 'cancel' button is clicked. Here's how my HTML code looks: <div reqdropzone="reqDropzoneConfig"> <form id="requisitionupload" class="dropzone dz-clickable" ac ...

javascriptjqueryangularjs

Ways to retrieve a single variable periodically and refresh it at intervals

One common issue faced by maintenance employees at my company is losing their log entry if they receive a call or text while filling out the daily form on their phones. To solve this problem, I came up with a solution to store the form values in PHP SESSIO ...

javascriptphpjqueryajax

Exploring node.js: How to extract elements from a path

I have an array of individuals as shown below: individuals = ['personA', 'personB', 'personC']; I am looking to create a dynamic way to showcase each individual's page based on the URL. For instance, localhost:3000/indi ...

javascriptnode.js

The object returned by bodyParser is not a string but a data structure

I have been working on implementing a JSON content listener in Typescript using Express and Body-parser. Everything is functioning perfectly, except when I receive the JSON webhook, it is logged as an object instead of a string. import express from 'e ...

javascriptjsontypescriptexpressbody-parser

Using PHP to read an image blob file from an SVG

Currently, I am utilizing the Raphael JS library on the client-side to generate a chart in SVG format. However, my goal is to make this chart downloadable, which poses a challenge since SVG does not natively support this feature. Initially, I attempted to ...

javascriptphpsvgraphaelimagick

How come I'm not receiving an error message when I enter an incorrect email or password?

Whenever I try to log in with the wrong password and email, no error message is displayed. Instead, it simply logs me in and takes me to the main page. Can someone please assist me in implementing an error message display for incorrect login details? imp ...

javascriptreactjsjsonfetch-api

Setting a radio button to be checked in AngularJS using stored data

I am facing an issue with the radio button for the account type. Even though it is correctly stored in the database, it does not display when I first load the page. However, upon clicking any of the radio buttons, it updates the value and shows as checked. ...

javascriptangularjstypescriptradio-button

What is the method for formatting within the <textarea> element?

While working on developing a comment system, I recently made the discovery that text areas cannot be formatted to retain paragraphs, line breaks, etc. This was particularly noticeable when comparing sites like StackOverflow, which uses a text editor inste ...

javascripthtmlforms

How to apply a series of spaces using span/tspan with jquery/javascript

Check out this fiddle: http://jsfiddle.net/jzLu4toe/3/ <span id='tghj'></span> $('#tghj').text('Hey There'); I'm facing an issue where I need to insert multiple spaces inside a span element. ...

javascriptjqueryhtml

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

javascriptjqueryhtml

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

Why does Angular not reset form after ng-click event?

Something seems off with my form reset after a ng-click event, am I missing something? I can successfully submit the form, but it doesn't automatically reset. Here is the error message I receive: angular.js:12701 POST 500 (Internal Server Error ...

javascriptangularjs

React destructuring props in a dynamic way

Consider we have a props, an incredibly large object: { "firstname": "John", "lastname": "Doe", "age": 11, "mode: "expert", "website": "stackoverflow.com" "pro ...

javascriptreactjs