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.
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 ] ).
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
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.
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!