Jak animować między dwoma kolorami za pomocą pliku three.js?

Question

Mam obiekt three.js, który ma określony kolor. Chcę płynnie animować inny kolor. Podczas animacji powinna pokazywać tylko bezpośrednią gradację między początkiem i końcem. Oznacza to, że nie powinien wykonywać animacji liniowo w przestrzeni kolorów RGB. Nie jestem nawet pewien, czy liniowa animacja w przestrzeni HSV dobrze by wyglądała.

Jak mogę uzyskać tego rodzaju koloru animacji na Three.js obiektu?

Answer 1

Mam wersję tego, która tworzy animację w przestrzeni HSV. Nie jest idealny, ponieważ po drodze może pojawić się wiele różnych odcieni.

Three.js nie obejmuje metodę uzyskania wartości HSV z THREE.Color. Tak, dodać jedną:

THREE.Color.prototype.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 
    }; 
}; 

Następnie animacja jest stosunkowo prosta:

new TWEEN.Tween(mesh.material.color.getHSV()) 
    .to({h: h, s: s, v: v}, 200) 
    .easing(TWEEN.Easing.Quartic.In) 
    .onUpdate(
     function() 
     { 
      mesh.material.color.setHSV(this.h, this.s, this.v); 
     } 
    ) 
    .start(); 

byłbym zainteresowany, aby usłyszeć o bardziej wyczuwalnie naturalnego przejścia.