Question regarding crossfading scenes example

Questions
1

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

2

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 :

834R

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
3

Thank you very much :slight_smile:

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