UPDATED with fiddle: As animations go faster there is increasing error in accuracy

Please check this fiddle: https://jsfiddle.net/uvfpwzb9/4/

Click “go” then wait a few and click “stop”. You’ll see that the animation that should only go back and forth ends up not animating to the correct final values.

I’m using this approach because I want to do some other actions between animations, in this case adding more spheres to the scene based on a counter. Is there a different / better way to trigger actions during an animation cycle?

Thank you!

…ends up not animating to the correct final values.

Your code seems to have a little more going on so it’s not obvious at a glance how speed of the animations is related here. Could you clarify a bit more what exact values you’re passing to the keyframes, and what expected vs actual positions of the object are? When I add a bit of logging:

mixer.addEventListener('finished', (event) => {
  console.log(scene.getObjectByName('machine-read').position)
  console.log("finished");
});

… it appears that the object is reseting to 0 0 0 as expected.

I added in a pause at the end of each animation to show the behavior more clearly.

the animation should only go position.y+150 and then position.y-150. Each time it goes up and down a sphere is added to the scene as a counter.

There’s a visual output for the Y value now in the UI.

https://jsfiddle.net/86n656ko/1/

I noticed that if I create a new mixer when each animation is complete then it behaves as expected.

Am I doing this right?

https://jsfiddle.net/jwuw1yu3/1/

Ok, that’s clearer thanks.

I’m not sure… this could be a race condition in your code, it could be something misaligned with the keyframe tracks being generated on the fly and not synced to frames, or it could also be a bug in the three.js animation code.

This is a somewhat uncommon way to use the animation system, generating clips (or especially mixers) on the fly, and I don’t know how practical that will be. You might also want to try aligning your go() function with the render loop, just to eliminate some moving parts here.

Have you considered using a tweening system instead? See: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/. That seems closer to what you want here, whereas keyframe animation is typically used in less dynamic situations, e.g. for playing back a predetermined clip.

EDIT: here is another example — https://stackoverflow.com/questions/25739954/tween-js-basics-on-three-js-cube

1 Like

Don, thanks for the reply.

How would I find out if it’s a problem in my code or a bug?

I have seen tween.js and thought of using it but I wanted to fully explore the built in animation system before pulling in another lib. Nowhere in the docs is it clear about the exact use case or limitations of the system, so that’s a def place for improvement either in clarifying intent or clarifying proper usage.

As for “aligning your go() function with the render loop”, do you have a quick example? go() is async so it can await each animation and I don’t want to be updating a mixers clock or rendering like that I think…