I am currently working on smoothly transitioning between multiple colors for a Day/Night Cycle in the background of my scene. Is it possible to achieve this effect? If so, how can it be done? Additionally, I am curious if it is feasible to incorporate GUI elements into Three.JS, specifically within the Three.JS Editor. Any insights on this would be greatly appreciated! Below is the test code I have been experimenting with, but unfortunately, none of my attempts have been successful.
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 further clarification or details are needed, please do not hesitate to reach out! Thank you!