我有一个给定颜色的 three.js 对象。我想将它平滑地设置为另一种颜色。在动画期间,它应该只显示开始和结束之间的直接渐变。也就是说,它不应该在 RGB 颜色空间中线性执行补间。我什至不确定 HSV 空间内的线性补间是否会很好看。
如何在 three.js 对象上获得这种颜色补间?
我有一个给定颜色的 three.js 对象。我想将它平滑地设置为另一种颜色。在动画期间,它应该只显示开始和结束之间的直接渐变。也就是说,它不应该在 RGB 颜色空间中线性执行补间。我什至不确定 HSV 空间内的线性补间是否会很好看。
如何在 three.js 对象上获得这种颜色补间?
我有一个在 HSV 空间中进行补间的版本。它并不完美,因为沿途会出现许多不同的色调。
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();
我很想听听更感性自然的过渡。