I'm working on a project in the Three.JS Online Editor. I'm trying to make a Day / Night Cycle. It should loop through colors, setting the scene background colors, like this:
And it should loop through these, forever.
I've gotten it to loop through two colors, but I can't seem to get it to loop through all three.
Is there a way to do this? Here's my code so far:
//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;
}
Any help would be appreciated.
If anyone needs any more information, please, let me know!
Thanks!
Try it like so:
let camera, scene, renderer, clock;
const colors = [
new THREE.Color(0xff0000),
new THREE.Color(0xffff00),
new THREE.Color(0x00ff00),
new THREE.Color(0x0000ff)
];
const duration = 4; // 4s
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();
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
const time = clock.getElapsedTime();
animateBackground(time)
renderer.render(scene, camera);
}
function animateBackground(t) {
const f = Math.floor(duration / colors.length);
const i1 = Math.floor((t / f) % colors.length);
let i2 = i1 + 1;
if (i2 === colors.length) i2 = 0;
const color1 = colors[i1];
const color2 = colors[i2];
const a = (t / f) % colors.length % 1;
scene.background.copy(color1);
scene.background.lerp(color2, a);
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>