I have created a custom animate function using three.js for 3D rendering. When clicking on the screen, the cube rotates based on the animation described in the function call. However, I noticed that if the cube is already animating under one animation and another animation is added, it does not flicker as expected. Instead, the last animation is halted and the new one takes over. Even though my callback function at the end shows that the old animation function was still running. So why does the cube not flicker when multiple clicks are sent?
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="three-mini.js"></script>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
UPDATE 1:
In an attempt to understand this behavior, I added more meshes and animated them differently with subsequent clicks. Each mesh is first rotated, then moved forwards and backwards before rotating again. Interestingly, animating position does not halt the rotation animation, and animating one mesh simultaneously with another does not stop previous animations either. So, why does the animation not flicker when multiple animations are running on the same mesh and property?
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="three-mini.js"></script>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
comment for WestLangley:
Let me further explain the scenario. If I click once to start an animation from position.x = 0 to targetValue: '+=200', and then halfway through I click again to animate in the negative x direction starting from position.x = 100 and targeting '-=200'. I would expect both animations to run concurrently, resulting in the cube jumping left and right until the first animation completes. However, only the latest animation affects the mesh properties while the others seem to be processed "hidden"ly. This raises concerns about CPU cycles being wasted and difficulties in adding animations in callback functions. How can these "hidden" animation calls be prevented?