Làm thế nào để tween giữa hai màu sắc bằng cách sử dụng three.js?

Question

Tôi có một đối tượng three.js là một màu nhất định. Tôi muốn tạo hiệu ứng động trơn tru cho màu khác. Trong quá trình hoạt ảnh, nó chỉ nên hiển thị một sự tăng dần trực tiếp giữa đầu và cuối. Đó là, nó không nên thực hiện tween tuyến tính trong không gian màu RGB. Tôi thậm chí không chắc chắn rằng một tween tuyến tính trong không gian HSV sẽ nhìn tốt hoặc.

Làm cách nào để có được loại màu này trên đối tượng three.js?

Answer 1

Tôi có một phiên bản của điều này làm cho một không hai trong không gian HSV. Nó không hoàn hảo, vì nhiều màu sắc khác nhau có thể xuất hiện trên đường đi.

Three.js không bao gồm phương pháp để nhận giá trị HSV từ THREE.Color. Vì vậy, thêm một:

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

Sau đó, tween là tương đối đơn giản:

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

Tôi muốn được quan tâm khi nghe tin một sự chuyển tiếp hơn perceptually tự nhiên.