The Wayback Machine - https://web.archive.org/web/20200716033228/https://github.com/spite/THREE.MeshLine/issues/55
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

more clarity on how to animate color #55

Open
wjessup opened this issue Jan 23, 2018 · 1 comment
Open

more clarity on how to animate color #55

wjessup opened this issue Jan 23, 2018 · 1 comment

Comments

@wjessup
Copy link

@wjessup wjessup commented Jan 23, 2018

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:

color animated lines

@wjessup wjessup changed the title no support for animating color? more clarity on how to animate color Jan 23, 2018
@spite
Copy link
Owner

@spite spite commented Jan 24, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.