Fade between colors with THREE.js

Question

I have a simple cube in THREE.js:

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xCC0000});

    var cube = new THREE.Mesh(
        new THREE.CubeGeometry(100, 100, 100),
    cubeMaterial);
    cube.position.set(0.7,1.95,-0.1);
    cube.scale.x = cube.scale.y = cube.scale.z = 0.002;
    scene.add(cube);

Any suggestions on how I can change the color of the material on the fly? What I want to achieve is a smooth fade (for instance from red to green) and be able to fade the color dynamically. So my guess is that it needs to be continuously re-rendered in the render-loop, and then somehow the color should be changed so it will gradually be faded to the target color. But I'm not really sure how to do that in code..

Thanks in advance!

Anders

Answer 1

You can use TWEEN.js: https://github.com/sole/tween.js/

There is a good solution to your question in this Stackoverflow question: How to tween between two colours using three.js?