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

three.js animate a Mesh with Color transition (tween.js)

本文关键字：js 网格 动画 tween 颜色 three      更新时间：2023-09-26

我都快疯了。我想改变一个网格(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()

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

我已经修改了一个来自threejs.org的例子来演示:http://jsfiddle.net/up1wg1Lo/2/

注意，我给animte和render添加了参数，以便它们可以知道刻度。还要注意第143行

上tween.update(time)的用法

使用TweenLite:

进行简单的颜色补间
var col = new THREE.Color('#ff00ff');
TweenLite.to(mesh.material.color, 1, {
  r: col.r,
  g: col.g,
  b: col.b,
});

如果你想优化性能并且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;
    }
  });
}
相关文章：