嘿!给我找不到一个明确的方法在论坛,我想分享一个css模板我想出可以呈现多个灯上彼此,动态颜色和色调映射到一个光的实体——比如:
个人灯:
要让多个灯光互相叠加，解决方案其实很简单。你为每个单独的光渲染一个图像，并使用CSS属性过滤器
mix-blend-mode:减轻
这将确保只显示图像的“光”部分，并将混合在顶部的任何数量的图像。
颜色和不透明度
为了将你的一个灯光图像映射到灯泡的真实的RGB颜色，你可以使用下面的CSS模板样式，它将调整色调旋转到灯泡的色调(在本例中，是light.table):
样式:filter: '${" color -rotate(" + (states[" light.table "].attributes. color -rotate ")。hs_color吗?州“light.table .attributes。(Hs_color [0]: 0) + "deg)“}”
OR，包括饱和度(我发现它有bug):
样式:filter: '${" color -rotate(" + (states[" light.table "].attributes. color -rotate ")。hs_color吗?州“light.table .attributes。(Hs_color [0]: 0) + "deg)saturate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[1] : 100)+ "%)"}'
要将不透明度映射到实体的亮度，使用以下css模板:
风格：不透明度：'$ {状态['light.table''。attributes.brightness / 255}'
在我的配置中，我还添加了一张白天和夜晚的图片，并将它们混合在一起，让我的家在晚上和白天有一个不同的外观。
希望这能帮助你们做出更疯狂的楼层规划!如果你需要一个地方开始，这是一个绝妙的概述，如何制作自己的平面图:
你可以在这里查看我的完整配置:
干杯!
