How to make useFrame alternate between two colors

Questions
, ,
1

I want to have a material’s color transition between teal and pink. I am not sure how to get the lerp’s alpha to alternate from one side to the other.

Here is what I have so far:

useFrame(() => {
    materialRef.current.color.lerpColors(new THREE.Color(0x086375), new THREE.Color(0xA80874), 0.1)
})

Thank you!

2

If I good understood your point, then you can interpolating these two colours, by updating by useFrame according to, mentioned, lerpAlpha. If lerpAlpha is 0, the color is full teal. If it’s 1, the color is full pink.

if (increasing) {
      setLerpAlpha((prev) => Math.min(prev + 0.01, 1));
      if (lerpAlpha >= 1) setIncreasing(false);
    } else {
      setLerpAlpha((prev) => Math.max(prev - 0.01, 0));
      if (lerpAlpha <= 0) setIncreasing(true);
    }

1 Like