The Three.js animation mixer won't refresh unless it's actively running in the animation loop

Question

The Three.js animation mixer won't refresh unless it's actively running in the animation loop

Encountering an odd quirk in JavaScript, where a simple AnimationMixer.update(delta) function only works when accompanied by a console.log statement:

// Here's one that works as expected
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // Updating mixers...
  Object.values(sandbox.models).forEach(x => (x.mixer && console.log(x.mixer.update(clock.getDelta()))));
}

// These ones do not work properly
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // Updating mixers...
  Object.values(sandbox.models).forEach(x => (x.mixer && (x.mixer.update(clock.getDelta()))));
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // Updating mixers...
  Object.values(sandbox.models).forEach(x => (x.mixer && void(x.mixer.update(clock.getDelta()))));
}

Furthermore, when attempting to play the animation using

AnimationMixer.clipAction(animation).play()

, it doesn't work unless I include the logging statement.

This behavior is quite perplexing - why does the mixer only update when its return value is logged?

I am unable to share all of the code due to its length and dependencies on external files.

Logging excessively is not a viable solution, as it can negatively impact game performance.

javascript animation three.js console.log requestanimationframe

Answer 1

Answer №1

It is best practice to refrain from calling Clock.getDelta() multiple times within your animation loop. Doing so can result in delta values that are close to 0, as it calculates the elapsed time between each call to getDelta(). To optimize this, you can structure your code as follows:

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  renderer.render(scene, camera);
  // Update mixers...
  Object.values(sandbox.models).forEach( x => {
    if (x.mixer) x.mixer.update(delta);
  } );
}

Additionally, try to minimize the use of Object.values() within the loop, as it creates a new array with each invocation leading to unnecessary overhead on garbage collection and performance issues.

Answer 2

It is best practice to refrain from calling Clock.getDelta() multiple times within your animation loop. Doing so can result in delta values that are close to 0, as it calculates the elapsed time between each call to getDelta(). To optimize this, you can structure your code as follows:

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  renderer.render(scene, camera);
  // Update mixers...
  Object.values(sandbox.models).forEach( x => {
    if (x.mixer) x.mixer.update(delta);
  } );
}

Additionally, try to minimize the use of Object.values() within the loop, as it creates a new array with each invocation leading to unnecessary overhead on garbage collection and performance issues.

The Three.js animation mixer won't refresh unless it's actively running in the animation loop

Answer №1

Similar questions

Implementing dynamic routing to manage the path /a/b-c-d-:e-:f

How come this JavaScript isn't triggering a confirmation box to display?

Angular2 allows for the creation of global variables that can have their values updated throughout the

What are the different ways to format a .SQL file in real-time when it is located on an internal website?

Issue with Google Charts JSON data parsing

What could be causing the User object in the auth0/nextjs useUser hook to have missing properties?

What could be causing my JavaScript try/catch block to not trigger?

Input Error in ASP.NET JavaScript

Issue: failure of child element - the provided path is incorrect: "users/[object Object]", when implementing Firebase with Next.js

What is the best way to create a child process in a separate directory?

Using JavaScript to dynamically render a variable amount of tiles

Tips on incorporating an external JSON file into a javascript variable for global accessibility

What steps can be taken to convert this function into a more concise, dry function?

Struggling to resolve a common issue in Migration? It seems that a raw query in Sequelize is adding backslashes that are causing errors when inserting values into the database

Retrieve a comprehensive roster of currently logged-in Keycloak users using Javascript

Can I update a label using ajax from the controller?

Concentrating on a Div Element in React

Is it possible to retrieve data from a database using jQuery and store it in separate variables?

Updated the object in an array retrieved from an API by adding a new key-value pair. Attempted to toggle the key value afterwards, only to find that

Only the first row of the table is responsive to the jQuery click listener