three.js animate a Mesh with Color transition (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()

Kaka

You are making too hard. Try var tween = new TWEEN.Tween( color ).to( { r: 0, g: 0.1, b: 0.45 }, 5000 ).start(); – Killing

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

Gynecologist

As admirable as it may be with all its complexity, this space debris animation has too much detail to visually demonstrate the color tween, as well as the required code principles... – Elagabalus

Answer 2

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,
});

Petey

this worked for me in a test project.. thanks felix – Floor

Answer 3

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;
    }
  });
}

Minuend