three.jsを使用して2つの色をトゥイーンする方法はありますか？

Question

私は与えられた色であるthree.jsオブジェクトを持っています。私はそれをスムーズに別の色にアニメーション化したい。アニメーション中は、開始と終了の間に直接グラデーションが表示されます。つまり、RGB色空間ではトゥイーンを線形に実行すべきではありません。私は、HSV空間内のリニアトゥイーンがうまくいくかどうかもわかりません。

three.jsオブジェクトでこのような種類のカラートゥイーンを取得するにはどうすればよいですか？

Answer 1

これは、HSV空間にトゥイーンを作成するバージョンです。途中で多くの色相が出現する可能性があるため、完璧ではありません。

Three.jsには、THREE.ColorからHSV値を取得する方法は含まれていません。だから、1を追加します。

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

その後、トゥイーンは比較的簡単です。

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

私はより多くの知覚的に自然な移行を聞いて興味があると思います。