问题描述
我有一个three.js所对象,它是一个给定的颜色。我想要顺利动画到另一个颜色。在动画,它应该只显示的开始和结束之间的直接灰度。即,它不应该在RGB颜色空间线性执行补间。我甚至相信HSV空间内的线性补看起来不太妙。
I have an three.js object which is a given colour. I want to animate it smoothly to another colour. During the animation, it should only show a direct gradation between the start and end. That is, it should not perform the tween linearly in RGB colour space. I'm not even sure that a linear tween within HSV space would look good either.
我怎样才能得到这种颜色调整的three.js所对象?
How can I get this kind of colour tween on a three.js object?
推荐答案
我有一个版本的这一点,使得HSV空间补间。它并不是完美的,因为许多不同的色调可以前进的道路上出现。
I have a version of this that makes a tween in HSV space. It's not perfect, as many different hues can appear along the way.
three.js所不包括从 THREE.Color
获取HSV值的方法。因此,添加一个:
Three.js doesn't include a method for getting the HSV values from a THREE.Color
. So, add one:
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
};
};
然后,吐温是相对比较简单:
Then, the tween is relatively straightforward:
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();
我很想听到更多的感知自然过渡。
I'd be interested to hear of a more perceptually natural transition.
这篇关于如何使用three.js所两种颜色之间吐温?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!