[Vibe Coding] MediaPipe - 用手势捏个宇宙

[Vibe Coding] MediaPipe 用手势捏个宇宙 [Vibe Coding] MediaPipe 用手势捏个宇宙 Modified November 28, 2025 348 390 No access b5e777f94cac4e4c6c5f15a23a26c2f5 00:00 No access 粒子互动.html 2. 创世之手 这个脑洞是，本来只是想做个手部动捕玩的，做到一半突然想搞个元气弹之类的酷炫效果，最后变成了模拟宇宙大爆炸，通过一些抖动效果和聚拢动效，做成了能量聚集，最后类似超新星爆发这样的效果。 No access 2ca866af3fb78780191d3582e5bc4a70 00:00 No access 创世之手.html 3. 沉浸手势相册 这里是利用手势捕捉做了大图模式和小图模式（流淌的河），不是很精美啊，意思意思，大图模式下，可以通过左滑和右滑翻页，支持图片和视频，看起来挺简单，里面其实挺多细节的，比如冷却的时长，怎么防止手势误判，以及其他图片的透明度，明暗度处理方式，在做的过程中都会碰到，非常有意思。 No access 877d5a26f518117cf690bfefc729ad3e 00:00 No access gallery.html 4. 沉浸式画廊 除了手部识别外，Mediapipe也支持身体姿态识别，用这个特性做了个沉浸式画廊。可以左右扭头，身体前倾/后仰看画展 No access 沉浸画廊.html 希望给大家的脑洞抛个砖，看到更多有意思的玩法 No access b5e777f94cac4e4c6c5f15a23a26c2f5 00:00 No access b5e777f94cac4e4c6c5f15a23a26c2f5 00:00 No access 粒子互动.html No access 粒子互动.html 2. 创世之手 这个脑洞是，本来只是想做个手部动捕玩的，做到一半突然想搞个元气弹之类的酷炫效果，最后变成了模拟宇宙大爆炸，通过一些抖动效果和聚拢动效，做成了能量聚集，最后类似超新星爆发这样的效果。 No access 2ca866af3fb78780191d3582e5bc4a70 00:00 No access 2ca866af3fb78780191d3582e5bc4a70 00:00 No access 创世之手.html No access 创世之手.html 3. 沉浸手势相册 这里是利用手势捕捉做了大图模式和小图模式（流淌的河），不是很精美啊，意思意思，大图模式下，可以通过左滑和右滑翻页，支持图片和视频，看起来挺简单，里面其实挺多细节的，比如冷却的时长，怎么防止手势误判，以及其他图片的透明度，明暗度处理方式，在做的过程中都会碰到，非常有意思。 No access 877d5a26f518117cf690bfefc729ad3e 00:00 No access 877d5a26f518117cf690bfefc729ad3e 00:00 No access gallery.html No access gallery.html 4. 沉浸式画廊 除了手部识别外，Mediapipe也支持身体姿态识别，用这个特性做了个沉浸式画廊。可以左右扭头，身体前倾/后仰看画展 No access 沉浸画廊.html No access 沉浸画廊.html 希望给大家的脑洞抛个砖，看到更多有意思的玩法 👨‍💻 偶然机会用Gemini做Vibe，偶然用到了Three.js和Mediapipe做了一个手部交互的小玩具，发现还挺有意思的。交互本身并不一定限制在鼠标键盘，其他的介质也是非常好的互动方式，于是就顺着这个思路做了几个新玩意，给大家抛个砖，扩展一下脑洞回路。 偶然机会用Gemini做Vibe，偶然用到了Three.js和Mediapipe做了一个手部交互的小玩具，发现还挺有意思的。交互本身并不一定限制在鼠标键盘，其他的介质也是非常好的互动方式，于是就顺着这个思路做了几个新玩意，给大家抛个砖，扩展一下脑洞回路。 实现逻辑 Gemini 3的语义理解还是非常牛逼的，同样的词在Qwen，GPT上面都实验了下，效果没有Gemini那么好（Claude没会员，所以没试）。总体的核心有几点： • 通过Mediapipe实现手部交互 • Three.js (WebGL)图形引擎实现3D渲染 • 基础的Html + Tailwind CSS • 其他的一些图形学 + 数学的概念 把这些需求揉到提示词里面去，然后尽可能详细描述希望达成的场景，就可以愉快Vibe了。 提示词模板示例 1. 粒子扩散与聚合 这个是最早做的一个，简单的手势互动，张开/握拳，可以让粒子散开或者聚合成特定的图像，支持自定义的文字效果，比较适合DIY一些特定的互动场景，比如厂牌或者其他图形之类的，大家可以用来解锁更多好玩的手势，和一些其他的动态效果，包括无交互时的循环模式，粒子的变换渲染效果之类。