使用THREE.js在颜色之间淡入淡出

问题描述 投票:1回答:1

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

关于如何动态更改材料颜色的任何建议?我要实现的是平滑的淡入淡出(例如从红色变为绿色)并能够动态淡入淡出颜色。因此,我的猜测是需要在渲染循环中对其进行连续的重新渲染,然后以某种方式更改颜色,以便逐渐将其淡化为目标颜色。但我不确定如何在代码中执行此操作。]

提前感谢!

安德斯

colors three.js webgl
1个回答
3
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.