three.js使用颜色过渡（tween.js）为网格设置动画

Question

我试图实现这个目标的过程变得疯狂。 我想在我徘徊时改变网格（ConvexGeometry）的颜色，直到这里我可以毫无问题地做到这一点，我可以改变网格的颜色。

当我想从a到b进行颜色转换/插值时，问题出现了，现在我正在使用tween.js，但它不起作用。 我不知道网格是否支持材质颜色过渡，或问题是其他...我会很感激任何帮助。

我找不到这样做的任何例子...只有这种类似的方法 。

在任何情况下，当我徘徊对象时，我正在做以下事情：

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以便他们可以知道tick。 另请注意第143行上tween.update(time)的用法

Answer 2

如果要优化性能并保持100％准确，则应在每个渲染帧中对补间执行计算步骤，但通常不需要对补间颜色执行此操作：

这是使用gsap，从来没有让我失望：

  var initial = new THREE.Color(target.material.color.getHex());
  var value = new THREE.Color(value.color.getHex());

  TweenLite.to(initial, 1, {
    r: value.r,
    g: value.g,
    b: value.b,

    onUpdate: function () {
      target.material.color = initial;
    }
  });
}

Answer 3

使用TweenLite的简单颜色补间：

var col = new THREE.Color('#ff00ff');
TweenLite.to(mesh.material.color, 1, {
  r: col.r,
  g: col.g,
  b: col.b,
});