我做了一个在线皮影戏，用手就能演（附开源地址）

无需下载，打开浏览器，你的手就是皮影。

大家好，我是福雷姆Flame。

今天给大家介绍一个我最近做的“数字玩具” —— 皮影戏。

这是一个完全运行在浏览器里的互动体验，不需要键盘，不需要鼠标，只需要你的双手。

🎭 它是做什么的？

简单来说，这是一个手势控制的数字皮影剧场。

当你打开网页，允许摄像头权限后，把手放在摄像头前：

– 你的手指会变成皮影的关节

– 你的手势会控制皮影的动作

– 你的远近会影响皮影的大小和虚实

就像小时候玩的手影游戏，或者传统的皮影戏一样，通过简单的手部动作，赋予屏幕上的剪影以生命。

💡 为什么做这个？

我一直对传统文化中的“仪式感”很着迷。皮影戏是一种古老的讲述故事的方式，它通过光影、肢体和操控者的技艺，创造出一个虚幻又真实的世界。

我想尝试用现代的 Web 技术（计算机视觉 + Canvas 渲染）去重构这种体验。

在这个项目中，并没有“通关”或者“得分”的概念。它不是一个游戏，而是一个让你去玩的玩具。你可以试着让皮影点头、挥手、跳跃，甚至编排一段属于你自己的小剧场。

AI制作的手势控制皮影戏《贵妃醉酒》

🎥 AI 遇上皮影：手指尖的《贵妃醉酒》

*“海岛冰轮初转腾……”*

当李胜素老师那段经典的唱腔响起，让人仿佛穿越回了那个华丽繁杂的盛唐。

这一次，我尝试用 AI 手势交互赋予传统皮影戏“新生命”。

画面中那个举手投足皆是风情的杨贵妃，其实是由我的指尖通过摄像头实时操控。为了还原贵妃那份“醉意”，我在程序里特别加入了一些随性的身体摇晃机制。那种微醺下的步履蹒跚，让扁平的数字皮影也有了动人的灵魂。

不得不感叹 AI 的神奇，它让古老的艺术变成了指尖触手可及的鲜活体验。

当然，自己做的还比较简单，只是一次小小的尝试。希望能带大家感受不一样的非遗魅力，也希望大家能多多关注我们的戏剧和皮影艺术，那是刻在骨子里的中式浪漫。

🙌 致谢

音频来源：李胜素老师《贵妃醉酒》海岛冰轮唱段

皮影素材：piying.design

 💻 技术实现

这个项目是开源的。

核心技术：依托于浏览器内置的计算机视觉模型进行实时手部追踪。

物理模拟：写了一套简单的 IK (反向运动学) 和物理模拟系统，让皮影的动作看起来有牵引在（Puppet Rigging）。

完全本地：所有的计算都在你的浏览器本地完成，不会上传任何视频数据，请放心玩耍。

🔗 在线体验 & 源码

我已经把项目发布至GitHub，包含完整的源码、设计文档及运行指南。如果实在不熟悉代码操作，也可以直接通过在线链接进行体验。

获取方式：

➡️公众号： FlameAI