javascript - three.js 使用颜色过渡动画网格 (tween.js)

Question

我正在疯狂地尝试实现这一目标。我想在悬停时更改网格(ConvexGeometry)的颜色，直到这里我可以毫无问题地做到这一点，我可以更改网格的颜色。

当我想用从 a 到 b 的颜色过渡/插值来实现时，问题就来了，现在我正在使用 tween.js，但它不起作用。我不知道网格是否支持 Material 颜色转换，或者问题是其他的...我将不胜感激。

我找不到任何这样做的例子......只有这个 similar approach .

无论如何，当我将鼠标悬停在对象上时，我会执行以下操作:

var tween = new TWEEN.Tween(INTERSECTED.material.materials[0].color)
            .to({r: 0, g: 25, b: 155}, 5000)
            .easing(TWEEN.Easing.Quartic.In)
            .onUpdate(function() {
                INTERSECTED.material.materials[0].color.r = this.r;
                INTERSECTED.material.materials[0].color.g = this.g;
                INTERSECTED.material.materials[0].color.b = this.b;
              }).start()

Answer 1

基本上，您需要为每个请求的动画帧执行 tween.update(time)。

我修改了 threejs.org 的一个例子来证明这一点:http://jsfiddle.net/up1wg1Lo/2/

请注意，我将参数添加到 animte 和 render 以便它们可以知道滴答声。另请注意第 143 行 tween.update(time) 的用法