Question

我为实现这一目标而疯狂。我想在我徘徊时改变网格（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()

Answer 1

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

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

请注意，我将参数添加到animte和render，以便他们可以知道勾号。另请注意第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的简单颜色补间：


    @Override
    public void onCreate() {
        super.onCreate();
        FacebookSdk.sdkInitialize(getApplicationContext());
        AppEventsLogger.activateApp(this);
    }

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

3 个答案: