Chaining fadeIn and fadeOut cancel each other out


I’m trying to perform the following actions on a 3d model.

  1. Starting with t pose
  2. Fade into walk/moving
  3. Fade out back into the t pose.

Problem I’m having is that chaining fadeIn and fadeOut cancel each other out, while documentation says there methods are ‘chainable’. The fade type that I put last (In or Out) is the one actually working. Separately, they also work fine.

Why does this not work as follows (for arguments sake we’ll assume 1 iteration is of the animation is 1 sec, while its actually about 2.2 sec):
-T Pose
-0 sec start fade in
-3 sec full weight
-8 sec start fade out
-T Pose

    .setLoop(this.LoopOnce, 10)

Thanks in advance. I know crossFading into idle animation is the more logical used choice, but I want to start simple.

The term chainable in three.js just means that some methods return a this reference so you directly add a subsequent method call. Check out this PR as an example.

So what you are trying to achieve does not work. Consider to use setTimeout() for this use case.

Them being shown in the docs one below the other like that made me assume that was the intention behind the ‘chaining’. But ok I misunderstood, will try another solution.

    .setLoop(this.LoopOnce, REPETITIONS)
    .crossFadeFrom(idleAnimation.action, 0.75, false)

  setTimeout(() => {
    console.log('timeout triggered?')
      .crossFadeTo(idleAnimation.action, 0.75, false)
  }, (ANIMATION_DURATION - 0.75) * 1000)

So something like this is close to what I wanted to achieve. I went for crossFading after all.