您可以在此处找到此 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()”的集成方法来插值/计算“下一个颜色”,但也没有太多运气。