Animations looks different and wrong when I play them on three js

Questions
1

I tested the animations in the three js editor, and they look like this:

While in the game, when I play the animation, it looks like this:

What am I doing wrong? And how can I fix it? I’m updating the mixer with clock.getDelta()

2

Incomplete or missing animation may happen if several clock.getDelta() are used in a single rendering loop (e.g. there are several characters and each of them is calling getDelta). Is this the case?

3

Yes it is. So making a new delta for each of them would solve it?

4

In a rendering loop clock.getDelta() should be called only once. If you have 3 mixers, they should all use the same delta:

function animation( )
{
   var delta = clock.getDelta( );
   :
   mixer1.update( delta );
   mixer2.update( delta );
   mixer3.update( delta );
}
5

I’m doing this. I’m calling clock.getDelta() inside the animation, storing it in the const delta, and using it for every character, like that mixer2.update(delta)…

6

I got the impression that there are several clock.getDelta() in the rendering loop. If not, then the problem is something else.

7

function animate() {

const animationId = requestAnimationFrame(animate)
renderer.render(scene, camera)
const delta = clock.getDelta();

characters.forEach((character) => {
scene.add(character.getModel());
character.updateSides();
character.update(delta);
});

There’s only one, I’m certain.

8

I’m not sure:

  • what does the characters array contain – if it is mixers, then what is updateSlides, if it is not mixers, then where how are the mixers’ updated
  • why you add the models to the scene every frame

As it is hard for me to guess so many things, I hope that someone else might be helpful.

9

characters array contains every character, which is a class, which has the method .update which calls mixer.update(delta). Updatesides is another method, which I use to update every frame the sides of the model, for collision purposes. Why I add the model to the scene every frame is a good question, I don’t know why… maybe I can change this but every other animations work properly, just this for the shooting that is kinda odd… so I don’t know if adding them every scene is the problem… You have any other idea?

10

No more ideas, besides some approaches, that only someone with access to the code and to the model can try:

  • oh-my-gosh approach: double check whether there is no accidental (or on purpose) mangling with the animation, like manually setting the animation time, trimming the animation clip, resetting/restarting the animation prematurely, etc.
  • compatibility approach: run the project (game?) on different browsers and different computers to see whether it behaves the same, sometimes some features do not work equally well on different systems
  • proxy approach: replace the character and its animation with another character with animation (for example one from the official Three.js examples). If the problem persists, then it is something in your code that makes the problem
  • bottom-up approach: create a new small program that only loads and animates this character. If it is working well, then this indicates there is something in your big project that makes the problem. If not, then either the animation in the character has some problem, or the smaller program has a bug.
  • top-down approach: make a copy of the whole project and start removing parts. Check whether the issue persists after removing each part. For example, first remove all other characters with animations, then other static objects and so on.
11

Hey man, thank you really for the help. The issue was that I was playing the animation while still playing the animation to stand still, so they end up being bugged. Really glad that you helped me. About that magic ray rotation, still a no go. But thanks for the help there too <3