fade out transition with keyFrameAnimation - ThreeJS

Question

I have 2 different map cubes. After 10 seconds I want the first map cube to fade out and the second map cube to fade in. I was told to use keyFrameAnimation but the only examples I've seen are to make an object move or rotate. If anyone has any examples or a starting point for me..

Any help is greatly appreciated. Thanks!

Bob Woodley · Accepted Answer · 2015-02-02 19:58:15Z

2

Change the opacity on the 2 materials in the animation routine.

mesh2.material.opacity = newOpacity;

Be sure that transparent is set to true on the material.

answered Feb 2, 2015 at 19:58

Bob Woodley

1,3041 gold badge15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tjddizon Over a year ago

Would you recommend I use the Clock() property or the keyFrameAnimation()?

Bob Woodley Over a year ago

You could just use regular javascript time function to check when 10 seconds have passed and then fade out over some interval you want. Depends what kind of precision you want I guess. You could also just wait for a few hundred calls of your renderer and then start the fade out over the next few hundred calls, if precision is not super important. Just count calls.

Collectives™ on Stack Overflow

fade out transition with keyFrameAnimation - ThreeJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related