四张图片做出可切换灯光的网页角色

一个带三盏灯的吉祥物，点击开关后，灯光会照到角色身上，多盏灯还能混色。作者原以为需要 three.js，拆开 AI 生成的实现才发现：核心是 4 张图片、CSS 的 mix-blend-mode，再加几行生成点击声的 JS。

这篇短文有用的地方，是把一个看起来复杂的光照效果拆成了普通前端也能理解的做法。不过，效果如何稳定复现、图片怎样生成，原文还留着不少空白。

三盏灯为什么只需要 4 张图片

作者看到的交互包含三个灯光开关：点击其中一个，对应的灯就会亮起或熄灭，角色身上也会出现相应的光照。

如果把每一种开关组合都单独画出来，素材会很快变多。作者拿到的方案则只用了 4 张图：

• 1 张所有灯都关闭的图片。
• 3 张分别只打开一盏灯的图片。

把这些图片叠放，再让 CSS 混合图层，就能组合出多盏灯同时亮起的效果。作者表示，打开 2 盏或 3 盏灯时，颜色仍然能混合得不错。

这里的光照主要画在图片里，浏览器负责把它们组合起来。

它不需要在运行时建立三维场景、计算灯光如何落到模型表面。对固定角色、固定灯位的展示效果，这是一条很直接的实现路径。

但也要分清：作者做出了这个案例，不代表任意 4 张图片叠起来都能得到同样的效果。

mix-blend-mode 做了什么，原文又没交代什么

这套方案的关键 CSS 属性是 mix-blend-mode。它控制元素与下方内容的颜色如何混合，让上层图片参与最终画面的颜色计算。

大白话解释：不是简单地把亮灯图片盖上去，而是让它与下面的画面共同形成最终颜色。

原文只给出了属性名，没有给出具体采用哪一种混合模式，也没提供图层顺序、开关状态如何控制图层显示等代码。因此，目前能拿走的是实现思路，还不是一份可以直接复制的组件。

声音也走了轻量路线。作者说，AI 写了几行 JS，由浏览器自己生成切换灯光时的点击声，不需要 mp3 文件。不过，原文没有说明使用哪个音频 API，也没有贴出代码，不能据此补成一套确定的实现。

素材方面，作者建议让 Gemini 或 ChatGPT 生成。听起来简单，实际却是他觉得最折腾的部分：他在演示文稿的第 9 页保留了反复提示、重新提示的过程，并坦言还在寻找更好的办法。

所以，前端代码短，不等于整个制作过程省事。这个案例把相当一部分工作移到了图片准备阶段。

我的判断

我更认可作者「生成之后再拆开理解」的做法。他先让 AI 调研并完成效果，随后发现自己并不知道它如何工作，于是回头研究实现。对于想边做边学的程序员，这一步比得到一个能运行的页面更有价值。

技术选择也合理：角色和灯的位置固定时，预先画好光照，再用 CSS 合成，可以减少实现复杂度。相比引入 three.js，它更适合这种以视觉展示和简单点击为主的案例；如果需求变成角色转动、灯位移动，这篇文章没有证明同一方案还能适用。

「多灯混色效果不错」是作者对自己案例的评价，原文没有提供对照数据。

它没有展示与 three.js 方案的画质、性能或资源体积比较，也没有给出不同浏览器的验证结果。因此，可以把它当作值得尝试的技巧，不能直接推成普遍更优的方案。

能拿来做什么

• 做固定角色的灯光交互原型时，可以先尝试「1 张全暗图＋3 张单灯图」的素材组织方式，再验证叠加后的混色是否符合预期。
• 让 AI 编写这类组件时，要求它解释图片分层、mix-blend-mode 的具体取值和开关状态的关系，方便自己接手修改。
• 生成素材时，逐张检查角色、构图和灯位是否一致。这是从叠图方案推导出的检查重点，原文没有给出稳定生成这些素材的方法。
• 需要短促的开关提示音时，可以尝试让浏览器直接生成声音；原文只证明作者这样做过，具体 API 和实现仍需补齐。