I am currently engaged in a project using the Three.JS Online Editor. The main goal of my project is to create a Day/Night Cycle that loops through various colors to set the scene background. The cycle should include:
- Day
- Sunrise/Sunset
- Night
- Sunrise/Sunset
- Day ... And so on.
The loop should continue indefinitely. So far, I have managed to loop through two colors successfully, but I am having difficulty looping through all three colors. Is there a solution for achieving this?
Displayed below is the current state of my code:
//var day = new THREE.Color(0xB8F4FF);
//var duskdawn = new THREE.Color(0xFF571F);
//var night = new THREE.Color(0x17012D);
//scene.background = new THREE.Color(0xB8F4FF);
let t = 0;
let tn = 0;
let cyc = 0;
//const day = new THREE.Color(0xB8F4FF);
var day = new THREE.Color(0xB8F4FF);
const duskdawn = new THREE.Color(0xFF571F);
const night = new THREE.Color(0x17012D);
animate();
function animate() {
requestAnimationFrame(animate);
t += 0.01;
tn += 0.01;
cyc = 0.9;
cyc += 0.1;
if(cyc % 2 == 1){
//day = new THREE.Color(0x17012D);
day = new THREE.Color(0xB8F4FF);
//scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(t) + 1));
scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(t) + 1));
day = new THREE.Color(0x17012D);
cyc += 0.1;
if(cyc != 1){
day = new THREE.Color(0x17012D);
}
/**/
}
if(cyc % 2 != 0){
//scene.background.copy(night).lerp(duskdawn, 0.5 * (Math.sin(tn) + 1));
//day = new THREE.Color(0xB8F4FF);
day = new THREE.Color(0x17012D);
scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(tn) + 1));
//day = new THREE.Color(0xB8F4FF);
cyc += 0.1;
//cyc = 0;
}
/**/
cyc = 0.9;
cyc += 0.1;
//cyc += 1;
}I would greatly appreciate any assistance with this issue. If more information is required, please feel free to reach out. Thank you!