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

Question

I'm getting crazy trying to achieve this. I want to change the color of a mesh(ConvexGeometry) when I hovered, until here I can do it without any problem, I can change the color of the mesh.

The problem comes when I want to make it with a color transition/interpolation from a to b, right now I'm using tween.js but its not working. I don't know if the mesh support a material color transition, or the problem is other...I would appreciate any help on this.

I can´t find any example doing this...only this similar approach .

In any case, when I hovered the object I'm doing the follow:

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

Basically you need to do tween.update(time) for each requested animation frame.

I hvae modified an example from threejs.org to demonstrate this: http://jsfiddle.net/up1wg1Lo/2/

Note that I add parameter to animte and render so that they can know the tick. Also note the usage of tween.update(time) on line 143

Answer 2

If you want to optimize performance and be 100% accurate you should do the computation step on your tween in each render frame, But its really not necessary to do so for a color tween usually:

This is using gsap, which has never failed me:

  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

A simple color tween using TweenLite:

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