तीन.जेएस का उपयोग कर दो रंगों के बीच कैसे जुड़ें?

Question

मेरे पास एक तीन.जेएस वस्तु है जो एक दिया रंग है। मैं इसे किसी अन्य रंग में आसानी से एनिमेट करना चाहता हूं। एनीमेशन के दौरान, इसे केवल शुरुआत और अंत के बीच प्रत्यक्ष क्रम दिखाना चाहिए। यही है, यह आरजीबी रंग अंतरिक्ष में लाइनों को रैखिक रूप से नहीं करना चाहिए। मुझे यह भी यकीन नहीं है कि एचएसवी स्पेस के भीतर एक रैखिक ट्विन भी अच्छा लगेगा।

मैं इस तरह के रंग ट्विन को तीन.जेएस ऑब्जेक्ट पर कैसे प्राप्त कर सकता हूं?

Answer 1

मेरे पास इसका एक संस्करण है जो एचएसवी स्पेस में एक ट्विन बनाता है। यह सही नहीं है, क्योंकि रास्ते में कई अलग-अलग रंग दिखाई दे सकते हैं।

Three.js में THREE.Color से एचएसवी मान प्राप्त करने के लिए कोई विधि शामिल नहीं है। तो, एक जोड़ें:

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

मैं एक अधिक perceptually प्राकृतिक संक्रमण की सुनने के लिए दिलचस्पी होगी।