Come interpolare tra due colori usando three.js?

Question

Ho un oggetto Three.js che è un determinato colore. Voglio animarlo uniformemente a un altro colore. Durante l'animazione, dovrebbe mostrare solo una gradazione diretta tra l'inizio e la fine. Cioè, non dovrebbe eseguire l'interpolazione linearmente nello spazio colore RGB. Non sono nemmeno sicuro che un'interpolazione lineare all'interno dello spazio HSV sarebbe anche bella.

Come posso ottenere questo tipo di tween colore su un oggetto Three.js?

Answer 1

Ho una versione di questo che rende un'interpolazione nello spazio HSV. Non è perfetto, poiché molte tonalità diverse possono apparire lungo il percorso.

Three.js non include un metodo per ottenere i valori HSV da un THREE.Color. Quindi, aggiungere 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 
    }; 
}; 

Poi, l'interpolazione è relativamente semplice:

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

Sarei interessato a sapere di una transizione più percettivamente naturale.