How to make smooth background change in three.js?

Question

WebGL

Good afternoon! I'm trying to change the background under different conditions. Everything works, but the background needs to change smoothly, similar to the css transition property. It is not possible to google this question correctly.
Here is the code:

function menuCurrent(dist) {
         if (dist > -680 && dist < planesLength + 300) {
             currentMenu('tattoo');
             scene.background = new THREE.Color(0xff0000);
         } else if (dist >= planesLength + 300 && dist < planesLength + picturesLength + 550) {
             currentMenu('picture');
         } else if (dist >= planesLength + picturesLength + 550) {
             currentMenu('about');
         } else if (isFrontPage) {
             $('#header-menu .active').removeClass('active');
             scene.background = new THREE.Color(0x0D0D45);
         }
     }

Answer 1

It just won't work. You need to write an animation function. On each each frame, step by step change the color along the way from the initial to the final.