three.js 用颜色过渡动画网格（tween.js）答案

【问题标题】：three.js animate a Mesh with Color transition (tween.js)three.js 用颜色过渡动画网格（tween.js）
【发布时间】：2014-04-25 17:31:18
【问题描述】：

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

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

我找不到任何这样做的例子......只有这个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()

【问题讨论】：

你太辛苦了。试试var tween = new TWEEN.Tween( color ).to( { r: 0, g: 0.1, b: 0.45 }, 5000 ).start();

标签： javascript three.js transition tween tween.js

【解决方案1】：

基本上你需要为每个请求的动画帧做tween.update(time)。

我修改了threejs.org 中的一个示例来演示这一点：http://jsfiddle.net/up1wg1Lo/2/

请注意，我将参数添加到 animte 和 render 以便他们可以知道刻度。还要注意第 143 行 tween.update(time) 的用法

【讨论】：

尽管它的复杂性令人钦佩，但这个太空碎片动画包含太多细节，无法直观地展示颜色补间以及所需的代码原则......

【解决方案2】：

使用 TweenLite 的简单颜色补间：

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

【讨论】：

【解决方案3】：

如果您想优化性能并达到 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;
    }
  });
}

【讨论】：