CODEWITHSUNDEEP
three.js
EJW
EJW

Reputation: 614

ThreeJS animate light color

I've made a directional light that I want to change color over time. I'm reading the documentation, but still not getting it up and running. Before init I declare variables:

var rmapped = 0;
var color;
var frontLight;

In my init I have:

color = "rgb(" + r + "," + g + "," + b + ")";
var frontLight = new THREE.DirectionalLight(color, 1);
frontLight.position.set(0, 0, 3000);
frontLight.castShadow = true;
frontLight.shadowDarkness = 1;
frontLight.shadowMapSoft = true;
scene.add(frontLight);

And in my update() I have:

rmapped = rmapped +.1;
color.add(rmapped,1,1)

I'm just as happy using HSL, or using addScalar(). I just need something up and running that can change the color every frame. Thanks!

Upvotes: 0

Views: 2894

Answers (1)

yomotsu
yomotsu

Reputation: 1462

You can change the light color via frontLight.color.

https://jsfiddle.net/8qaf13nv/

// h — hue value between 0.0 and 1.0 
// s — saturation value between 0.0 and 1.0 
// l — lightness value between 0.0 and 1.0
var h = rmapped * 0.01 % 1;
var s = 0.5;
var l = 0.5;
frontLight.color.setHSL ( h, s, l );

rmapped ++;

Upvotes: 2

Related Questions