more clarity on how to animate color

[wjessup]

It wasn't clear this was possible at first because its not in the documentation or any examples and the sort of functions that regularly make this work (color.setHSL) don't work.

Anyway, a bit of hacking and I got it working. May be nice to add.

I hacked apart the internals a bit and just added these modified functions to my project

function hue2rgb( p, q, t ) {

                if ( t < 0 ) t += 1;
                if ( t > 1 ) t -= 1;
                if ( t < 1 / 6 ) return p + ( q - p ) * 6 * t;
                if ( t < 1 / 2 ) return q;
                if ( t < 2 / 3 ) return p + ( q - p ) * 6 * ( 2 / 3 - t );
                return p;

            }

            function setHSL( h, s, l ) {
                let r,g,b
                // h,s,l ranges are in 0.0 - 1.0
                h = ( ( h % 1 ) + 1 ) % 1 // _Math.euclideanModulo( h, 1 );
                s = Math.max( 0, Math.min( 1, s ) )//_Math.clamp( s, 0, 1 );
                l = Math.max( 0, Math.min( 1, l ) )//_Math.clamp( l, 0, 1 );

                if ( s === 0 ) {

                    r = g = b = l;

                } else {

                    var p = l <= 0.5 ? l * ( 1 + s ) : l + s - ( l * s );
                    var q = ( 2 * l ) - p;

                    r = hue2rgb( q, p, h + 1 / 3 );
                    g = hue2rgb( q, p, h );
                    b = hue2rgb( q, p, h - 1 / 3 );

                }

                return new THREE.Color(r,g,b);

            }

and use it like this:

function render() {
  var time = Date.now() * 0.00005;
  var h += ( 360 * ( 1.0 + time ) % 360 ) / 360;
  lineMaterial.uniforms.color.value = setHSL(h, 0.5, 0.5)

}

works great! demo:

[spite]

lineMaterial.uniforms.color.value is already a THREE.Color, your setHSL function could get the uniform s a parameter, and .set(r,g,b)

[Jeremboo]

Looks like to be an issue with the usage of THREE.Color and not with the library itself.