javascript - 三种 JS PointLight 平滑颜色插值动画效果，如 fastLED、WLED

Question

您可以在此处找到此 Web 项目的原型（此站点不是最新的，因此您将在那里找到的 animate() 函数可能与下面的不匹配）

调色板如下所示：

let party = [
    0x5500ab,
    0x84007c,
    0xb5004b,
    0xe5001b,
    0xe81700,
    0xb84700,
    0xab7700,
    0xabab00,
    0xab5500,
    0xdd2200,
    0xf2000e,
    0xc2003e,
    0x8f0071,
    0x5f00a1,
    0x2f00d0,
    0x0007f9
];

我认为为了让它更平滑，我们必须插入颜色

到目前为止，我的三个 JS 动画循环中有什么：

function animate(now) {
    // Convert to seconds
    now *= 0.001;
    // Subtract the previous time from the current time
    var deltaTime = now - then;
    // Remember the current time for the next frame.
    then = now;

    if (resizeRendererToDisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
      }

    if(now >= nextTime) {
        scene.children.forEach(function (e) {
            if (e.name.includes("pl")) {
                // track the current led index
                currentLed = currentLed >= numPixels-1 ? 0 : currentLed+1;
                // calculate the next index for the color palette
                currentColor = currentColor >= party.length-1 ? next=0 : Math.floor((next + currentLed)%(party.length-1));

                 // get new color from color palette "party"
                 var cc = new THREE.Color( party[currentColor] );

                // update PointLight light color
                e.color.setHex( cc.getHex() );
                 
                // update PointLight sphere color HELPER
                //e.children[0].material.color.setHex( color.getHex() );

            }
        });
        nextTime = now + .01;
    }

    if(now >= nextTime1) {        
        hue1 += 2;
        next += .1;
        nextTime1 = now + .01;
        
    }


    controls.update(); // auto rotate camera

    stats.update(); // display FPS thingy
    
    id = requestAnimationFrame( animate );
    renderer.render(scene, camera);
}

我希望它平滑过渡到调色板中的下一个颜色，就像WLED正在做的那样。

// 更新 PointLight 灯光颜色
e.color.setHex( cc.getHex() );

更准确地说......这个值需要是一个插值或其他东西

cc.getHex()

我尝试使用以下效果（来自 WLED）作为灵感...... FX.cpp 1659 中的 uint16_t WS2812FX::mode_palette() 但它确实......没有......工作......不幸的是......我努力了深入 wled 代码以弄清楚这可能如何工作.. 但是....我有一些不知道的东西。

我所知道的是，魔法在 FX_fcn.cpp 的第 1056 行和FX_fcn.cpp的第 1073 行，在 此函数之后到colorutils.cpp（FastLED GitHub Repo）的第 552 行，你可以看到这一切的根源。 .如果我没记错的话，这种方法可能会插入一些颜色......但我真的不知道到底发生了什么。

我还尝试使用来自三个 JS“lerp()”的集成方法来插值/计算“下一个颜色”，但也没有太多运气。

标签： javascriptcolorsthree.jsinterpolationfastled