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()

You are making too hard. Try `var tween = new TWEEN.Tween( color ).to( { r: 0, g: 0.1, b: 0.45 }, 5000 ).start();` — WestLangley, Mar 19 '14 at 13:04

score 3 · Answer 1 · answered Jan 28 '15 at 07:03

3

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

answered Jan 28 '15 at 07:03

Shuhao Tan

166
1
6

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... – matanster Jul 08 '17 at 15:28

score 2 · Answer 2 · answered May 22 '18 at 22:37

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

answered May 22 '18 at 22:37

Felix Turner

1,345
1
9
8

yeahdixon · Answer 3 · 2018-03-07T21:56:55.660

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

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

3 Answers3