Is there a way to apply transition on change of the setClearColor of WebGL Renderer in three.js?

Question

var glRenderer = new THREE.WebGLRenderer({antialiasing: true, alpha:true}); glRenderer.setClearColor(0x000000);

I want to apply a transition or tween setClearColor from old one to a new color

Answer 1

Yes, there is a way. For example, like this:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var color1 = new THREE.Color("red");  // start color
var color2 = new THREE.Color("blue"); // end color

var tween = new TWEEN.Tween(color1).to(color2, 3000).onUpdate(function() {
  renderer.setClearColor(color1);
}).start();

render();

function render() {
  requestAnimationFrame(render);
  TWEEN.update(); // don't forget to add this line when you use Tween.js
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>