TheeJS Background Color Animation

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r99/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


scene.background = new THREE.Color(0xfff6f6)

camera.position.z = 5;

new TWEEN.Tween(scene.background)
  .to({
  b: Math.random() * 255,
  g: Math.random() * 255,
  r: 0, // if this equals to more than 0... it's always wbite
})
  .easing(TWEEN.Easing.Exponential.InOut)
  .start()

new TWEEN.Tween(this).to({}, 1000).onUpdate(this.render).start()


var animate = function () {
  requestAnimationFrame(animate);

  TWEEN.update()

  renderer.render(scene, camera);
};


animate();