¿Cómo intercalar entre dos colores usando three.js?

Question

Tengo un objeto three.js que tiene un color determinado. Quiero animarlo suavemente a otro color. Durante la animación, solo debe mostrar una gradación directa entre el inicio y el final. Es decir, no debe realizar la interpolación de forma lineal en el espacio de color RGB. Ni siquiera estoy seguro de que una interpolación lineal dentro del espacio HSV se vea bien tampoco.

¿Cómo puedo obtener este tipo de interpolación de color en un objeto three.js?

Answer 1

Tengo una versión de esto que hace una interpolación en el espacio de HSV. No es perfecto, ya que pueden aparecer muchos matices diferentes en el camino.

Three.js no incluye un método para obtener los valores HSV de THREE.Color. Por lo tanto, agrega uno:

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 
    }; 
}; 

Entonces, la interpolación es relativamente sencillo:

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(); 

estaría interesado en escuchar de una transición más perceptualmente natural.