Looping animation has a gap ( pauses each loop )

Questions
1

I am importing 3d model with two animations from 3ds max. Both animations are on the timeline, one is frame 10-100, second 110-140. Importing and loading both animations with fbx loader works well. The issue comes with looping these animations.

The first animation has very slight pause when looping, the second one has much longer few seconds long pause. So what I am thinking is that the pause is probably caused by the offset from start of the animation from zero frame. Ie first animation has small pause, because it starts 10 frames from zero, second one has much longer pause, because it is 110 frames from zero.

But I don’t know how to solve this. I can’t realy change it in 3ds max, I can move the first animation to zero, but the second animation will always have to be somewhere further on the timeline. Also I am setting the ranges correctly in the 3ds max exporter. Is there some way to clean this up in threejs, so that threejs is using only the correct frames for the animation? It seems that threejs is somehow keeping the previous frame from zero ( altho it ignores what is in them )

2

if your animation does indeed contains some time period that looks like a pause, then you can try using AnimationUtils.subclip

Example : Threejs AnimationUtils Subclip - JSFiddle - Code Playground

1 Like
3

Thanks, that worked. I am just wondering, do you know why the values for start and end frame has no effect?

const flyAnim = object.animations[1];
const flyAnimTrim = THREE.AnimationUtils.subclip(flyAnim, ‘fly’, 110, 140);
const action = mixer.clipAction(flyAnimTrim);
action.play();

This works well and animations plays without any pause, but so does this now. It’s not a problem, just a bit confusing

const flyAnimTrim = THREE.AnimationUtils.subclip(flyAnim, ‘fly’, 80, 200);

4

I don’t know why it has no effect for you without seeing a working example of your code.
It works for me when I change the value in my demo.

From

const trimmedAction = THREE.AnimationUtils.subclip(walkAction, 'trimmedWalk', 0, 29);

to

const trimmedAction = THREE.AnimationUtils.subclip(walkAction, 'trimmedWalk', 20, 23);

(it is a shorter loop)

5

I did test it on both animations and first one gets affected by the frame start and end and the second animation ignores it. Just thought I will mention it, it works perfectly fine otherwise. Thanks.

6

Are you using multiple mixers?

Check how you are updating your mixers.

When people use multiple mixers, they sometimes pass in a very low number to the second/third mixer.

i.e.,

mixer1.update(clock.getDelta())
mixer2.update(clock.getDelta())  //this is a very, very, very low number

It is better to use

delta = clock.getDelta()
mixer1.update(delta)
mixer2.update(delta)
1 Like