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:
- Day
- Sunrise/Sunset
- Night
- Sunrise/Sunset
- Day … Etc., etc.,
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!
Advertisement
Answer
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/three@0.124/build/three.js"></script>