"Smooth" clear color transition

Questions
,
1

I’m doing a list of exercises and one of them is to edit this code:

function main() {

	renderer = new THREE.WebGLRenderer();

	renderer.setClearColor(new THREE.Color(0.0, 0.0, 0.0));
	renderer.setSize(window.innerWidth*0.8, window.innerHeight*0.8);

	document.getElementById("threejs-canvas").appendChild(renderer.domElement);

	window.addEventListener("resize", onWindowResize, false);

	scene 	= new THREE.Scene();
	camera 	= new THREE.Camera();

	renderer.render(scene, camera);
	
	anime();
};

function anime(time) {
	

 	timer.update(time);			

 	sum_delta += timer.getDelta(); 

	if (sum_delta > 1.0) { 
		renderer.setClearColor(new THREE.Color(Math.random(), Math.random(), Math.random()));
		renderer.render(scene, camera);
		sum_delta = 0.0; 			
		}

	requestAnimationFrame(anime);
};

The idea is to make the color change “smooth” instead of a sudden jump from one color to the next. Given this is meant to be a starter question, can anybody give me some help?

2

Have you tried the inbuilt color.lerp method? This may or may not serve your use case, iirc this would transition from one end of the spectrum to the other, meaning yellow to pink would essentially transition through the majority of colors before reaching pink… there are ways to mitigate this but maybe try this and report back with the result?

1 Like
3

Or another one .lerpHSL :slight_smile:

1 Like
4

Not the thing you’re asking for, but as a starting point:
https://codepen.io/prisoner849/full/VYKbOrQ
Click runs transition to a random color.

1 Like