(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!

score 2 · Answer 1 · answered Dec 04 '20 at 16:21

2

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/three@0.123/build/three.js"></script>

answered Dec 04 '20 at 16:21

Mugen87

28,829
4
27
50

Hi, sorry for the late reply. This is what I'm looking for, but I have one question; how would I make it also have a night cycle? – Fox GAMING_NTF Dec 04 '20 at 18:04
2

I suggest you open a new question for this. But one approach that allows you to interpolate between an arbitrary count of colors is to setup a color keyframe track like in this example (https://threejs.org/examples/#misc_animation_keys) and then use animation system to animate the background. – Mugen87 Dec 04 '20 at 19:35
Hi, sorry for the late reply. I'm wondering, are there any other ways of doing this? Also, I did say in my question that I was trying to transition between colors for Day, Sunrise/Sunset, and Night. – Fox GAMING_NTF Dec 07 '20 at 14:24
Do you know of any others? – Fox GAMING_NTF Dec 10 '20 at 12:54
Do you know if there is a way to achieve having a Day, and Night, Cycle, using Lerp, or something other than animation keys? – Fox GAMING_NTF Dec 15 '20 at 17:42
I'm still looking for a way to do this. – Fox GAMING_NTF Jan 04 '21 at 12:41

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

1 Answers1