如何使用three.js在两种颜色之间进行补间？

Posted 2023-02-27

【中文标题】如何使用three.js在两种颜色之间进行补间？

【英文标题】：How to tween between two colours using three.js?

【发布时间】：2012-09-12 08:04:58

【问题描述】：

我有一个给定颜色的 three.js 对象。我想将它平滑地设置为另一种颜色。在动画期间，它应该只显示开始和结束之间的直接渐变。也就是说，它不应该在 RGB 颜色空间中线性执行补间。我什至不确定 HSV 空间中的线性补间是否会好看。

如何在 three.js 对象上获得这种颜色补间？

【参考方案1】：

我有一个在 HSV 空间中进行补间的版本。它并不完美，因为沿途会出现许多不同的色调。

Three.js 不包含从 THREE.Color 获取 HSV 值的方法。所以，加一个：

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

我很想听听更自然的过渡。

【讨论】：

如果用 rgb 代替，做同样的事情怎么样？ new TWEEN.Tween(mesh.material.color).to(r: 1, g: 0, b: 0 , 200).start()

@mrdoob，我过去在 RGB 空间内进行线性混合的实验往往会产生难看的中间色。不过我会再试一次。目前，上述方法似乎运行良好。

啊。我误解了你。是的。听起来你的方法很好。

请问如何在 tween.js 中实现它？

有人有这方面的fiddlejs吗？我总是收到object.material.color.setHSV is not a function...