Üç renk arasında nasıl üç arasına nasıl geçilir?

Question

Verilen bir renk olan bir three.js nesnesine sahibim. Başka bir renge sorunsuzca canlandırmak istiyorum. Animasyon sırasında, sadece başlangıç ​​ve bitiş arasında doğrudan geçiş göstermelidir. Yani, rengin RGB renk uzayında aralığını gerçekleştirmemesi gerekir. HSV uzayındaki lineer bir aralamanın da iyi görüneceğinden bile emin değilim.

Bu tür renk aralarını nasıl üç.js nesnesinde alabilirim?

Answer 1

HSV alanında bir ara doldurmayı yapan bir sürümüm var. Mükemmel değil, yol boyunca farklı tonlar ortaya çıkabilir.

Three.js, THREE.Color'dan HSV değerlerini almak için bir yöntem içermez. Yani, bir tane ekleyin:

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

Sonra aranın oldukça basittir:

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

Ben daha algısal doğal geçiş duymak ilgi duyarım.