javascript - three.js animate a Mesh with Color transition (tween.js) - Stack Overflow

admin管理员组

文章数量:1279008

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

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

• javascript
• three.js
• transition
• tween
• tween.js

Share Improve this question Follow edited May 23, 2017 at 12:21 CommunityBot 111 silver badge asked Mar 19, 2014 at 12:50 elverdeelverde 19311 gold badge22 silver badges77 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

I hvae modified an example from threejs to demonstrate this: http://jsfiddle/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

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

If you want to optimize performance and be 100% accurate you should do the putation 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;
    }
  });
}

本文标签： javascriptthreejs animate a Mesh with Color transition (tweenjs)Stack Overflow