Hi,

I’m trying to figure out the math and logic behind the scenes crossfading example.

I’d appreciate an explanation of this code bit:

```
const t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;
transitionParams.transition = THREE.MathUtils.smoothstep( t, 0.3, 0.7 );
```

I don’t get the `(1 + sin(speed * time / pi)) / 2`

part.

Thanks

The goal of this line is to get a value between 0 and 1 based on the elapsed time and the animation speed.

`Math.sin`

returns a number in the range [ -1, 1 ] based on the passed angle in radians :

We want the number in the range [ 0, 1 ]. So when we get the value returned by `Math.sin`

, we add 1 ( the range becomes [ 0, 2 ] ), then divide by 2 ( the range becomes [ 0, 1 ] ).

About `Math.sin`

passed angle ( `transitionSpeed * elapsedTime / pi`

) :

A full radians angle is PI x 2, so if you only passed `elapsedTime`

, the animation would loop every 6.28 seconds. Multiplying `elapsedTime`

by `transitionSpeed`

actually multiply the passed angle, so it multiply the animation speed. The division by pi is a mistake I think… Its only makes the animation 3.14 times slower.

1 Like

Thank you very much

I knew how sin works. I think the part that got me was the elapsed time. I figured both the time and speed cannot be less than zero, so the entire thing can’t be less than 1/2, so I didn’t see why would we ever need to clamp between 0.3 and 0.7 with smoothstep. But now with your answer I realize that the clock keeps ticking, and thus sin results in a negative number. Also understand now the plus one divide by two part.

Thanks a lot!

1 Like