用THREE.js淡化颜色

时间:2012-12-10 12:17:43

标签: colors webgl three.js material

我在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);

有关如何在运行中更改材料颜色的任何建议?我想要实现的是平滑的淡入淡出(例如从红色到绿色)并且能够动态淡化颜色。所以我的猜测是它需要在渲染循环中连续重新渲染,然后以某种方式改变颜色,使其逐渐淡化为目标颜色。但我不确定如何在代码中这样做..

提前致谢!

的Anders

1 个答案:

答案 0 :(得分:3)

您可以使用TWEEN.js:https://github.com/sole/tween.js/

在Stackoverflow问题中,您的问题有一个很好的解决方案:How to tween between two colours using three.js?