(Three.JS) How to loop lerp scene background colors?

Question

as the title says, I'm trying to smoothly transition between multiple colors. (Day, Sun Rise/Set, and Night,), and have these colors as the background for my scene, essentially, I'm trying to make a Day/Night Cycle. Is this possible? If so, how? I'm also wondering, is it possible to add GUI into Three.JS? I'm talking about in the Three.JS Editor, by the way. Thanks! Here's the test code, along with everything I've tried so far. Obviously, none of which have worked.

var day = new THREE.Color(0xB8F4FF);
var duskdawn = new THREE.Color(0xFF571F);
var night = new THREE.Color(0x17012D);

//scene.background = new THREE.Color(0xB8F4FF);



/*
//cycleloop();
function cycleloop(){
    var day = new THREE.Color(0xB8F4FF);
    var duskdawn = new THREE.Color(0xFF571F);
    var night = new THREE.Color(0x17012D);
    var clock = new THREE.Clock();
    clock.start();
    var speed = 10;
    var delta = 0;
    delta = clock.getDelta();
    var col = new THREE.MathUtils.lerp(day, duskdawn, 0.1);
    //scene.background.setColor(new THREE.MathUtils.lerp(day, duskdawn, delta));
    scene.background = new THREE.Color(new THREE.MathUtils.lerp(day, duskdawn, delta));
    requestAnimationFrame(cycleloop);
    //renderer.render(scene, camera);
}

cycleloop();
*/
function cycletime() {
  var time;
  //scene.background.setColor(new THREE.MathUtils.lerp(day, duskdawn, time));
  scene.background = new THREE.Color(new THREE.MathUtils.lerp(day, duskdawn, time));
}
for (i = 0; i < 100; i++) {
  cycletime();
}

/*
let then = 0;
function animate(now) {
  now *= 0.001;  // make it seconds

  const delta = now - then;
  then = now;

  object.position.z += delta * speedInUnitsPerSecond;

  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
*/

//vartween = new TWEEN.Tween(day).to(duskdawn, 5000).start();

//scene.background.setColor(new THREE.MathUtils.lerp(day, duskdawn, 0.1));
//scene.background.setColor(tween);

If anyone needs any more information, please, let me know! Thanks!

Answer 1

You are not perform the linear interpolation correctly. Try it with this code instead:

let camera, scene, renderer;

let t = 0;

const day = new THREE.Color(0xB8F4FF);
const duskdawn = new THREE.Color(0xFF571F);

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();
  scene.background = new THREE.Color();

  const geometry = new THREE.BoxBufferGeometry(0.2, 0.2, 0.2);
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

  t += 0.01;

  scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(t) + 1));

  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>