Chaining fadeIn and fadeOut cancel each other out

Questions
1

Hello.

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

  nextTileAnimation.action
    .setLoop(this.LoopOnce, 10)
    .fadeIn(3)
    .fadeOut(3)
    .play()

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

2

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.

3

image
image994×253 25.9 KB

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.

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

  setTimeout(() => {
    console.log('timeout triggered?')
    idleAnimation.action.reset()
    nextTileAnimation.action
      .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.