Color transmission/tween/lerp

Questions
, ,
1

Hi there! :slight_smile:

Is this the only straightforward option for transmission an object’s color for making it look like it’s blinking/pulsating?

When I try this, I get the following error: ‘Uncaught TypeError: child.material.color.getHSV is not a function’.

I added the function

getHSV: function () {
		var rr, gg, bb,
			h, s,
			r = this.r,
			g = this.g,
			b = this.b,
			v = Math.max(r, g, b),
			diff = v - Math.min(r, g, b),
			diffc = function (c) {
				return (v - c) / 6 / diff + 1 / 2;
			};

		if (diff == 0) {
			h = s = 0;
		} else {
			s = diff / v;
			rr = diffc(r);
			gg = diffc(g);
			bb = diffc(b);

			if (r === v) {
				h = bb - gg;
			} else if (g === v) {
				h = (1 / 3) + rr - bb;
			} else if (b === v) {
				h = (2 / 3) + gg - rr;
			}
			if (h < 0) {
				h += 1;
			} else if (h > 1) {
				h -= 1;
			}
		}
		return {
			h: h,
			s: s,
			v: v
		};
    },

in my three.js library and call it in the render() loop with

if (scene.getObjectByName("<name>")) {

    scene.getObjectByName("<name>").children.forEach(function (child) {
        new TWEEN.Tween(child.material.color.getHSV())
            .to({ h: 0, s: 100, v: 100 }, 200)
            .easing(TWEEN.Easing.Quartic.In)
            .onUpdate(
                function () {
                    child.material.color.setHSV(this.h, this.s, this.v);
                }
            )
            .start();
    });
}

Hope somebody can help :slight_smile:

2

You could do the interpolation in HSL space. three.js provides respective methods. Check out:

https://threejs.org/docs/index.html#api/en/math/Color.getHSL
https://threejs.org/docs/index.html#api/en/math/Color.setHSL

There are also specific lerp methods:

https://threejs.org/docs/index.html#api/en/math/Color.lerp
https://threejs.org/docs/index.html#api/en/math/Color.lerpHSL

I would start with these ones before implementing a custom method.

3 Likes
3

Thank you for this! :slight_smile:

I created this fiddle and it kind of works but I’m not happy with the transition. To me it seems like the original green color is transitioning to red and then it somehow jumps back to green and so on.

Can somebody help with this please? :slight_smile:

4

Hi!
Maybe try something simpler for transition between colors. For example, use Math.sin() and time.
https://jsfiddle.net/prisoner849/1k397beg/

3 Likes
5

Thank you! :slight_smile:

6

@prisoner849. I need this transition only on clicking on any gui or clicking on the object from one color to another color. I tried to modify the script by moving the color changing part above to the above to the animate part. Still it is not working