https://yhk.life/tags/gesture-interaction/Gesture InteractionHugoBlox Kit (https://hugoblox.com)en-usSun, 07 Dec 2025 00:00:00 +0000https://yhk.life/media/icon.svghttps://yhk.life/tags/gesture-interaction/https://yhk.life/blog/20251207-%E6%89%8B%E5%8A%BF%E4%BA%A4%E4%BA%92%E5%9C%A3%E8%AF%9E%E6%A0%91%E6%83%8A%E5%96%9C/Sun, 07 Dec 2025 00:00:00 +0000https://yhk.life/blog/20251207-%E6%89%8B%E5%8A%BF%E4%BA%A4%E4%BA%92%E5%9C%A3%E8%AF%9E%E6%A0%91%E6%83%8A%E5%96%9C/<p>每年圣诞节都会给老婆准备一个特别的惊喜，安排在专门为她准备的域名上。前几年有过一个小博客网站、一个小菜谱网站、也想尝试过相册网站，但都不够惊喜。今年 AI 技术已经非常成熟，短短几行代码就能让 Gemini 生成一个可交互的网站，听说有人尝试了圣诞树效果，决定在前人的基础上小小修改。</p> <p>首先特别感谢这个项目的原作者，没有这个项目我也不可能完成这个惊喜：</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-1664630854aa9703691263b9cb052844"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center"> <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-1664630854aa9703691263b9cb052844" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://github.com/electronicminer/gesture-Christmas_tree-3d_with_photo" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">gesture-Christmas_tree-3d_with_photo</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="text-sm text-zinc-600 dark:text-zinc-400">by <a href="https://github.com/electronicminer" target="_blank" rel="noopener" class="font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">electronicminer</a> </span><span class="text-sm text-zinc-500 dark:text-zinc-500">•</span> <span class="inline-block w-2 h-2 rounded-full bg-primary-500"></span> <span class="text-sm text-zinc-500 dark:text-zinc-500 capitalize">HTML</span></div> </div> <div class="flex-shrink-0"> <a href="https://github.com/electronicminer/gesture-Christmas_tree-3d_with_photo" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3"> A 3D particle Christmas tree controlled by hand gestures. Built with Three.js &amp; MediaPipe. 🎄✨ (一个由手势控制的 3D 粒子圣诞树。基于 Three.js 和 MediaPipe 构建。) </p><div class="flex items-center gap-6 pt-2"><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M6 2C4.89543 2 4 2.89543 4 4C4 4.74028 4.4022 5.38663 5 5.73244V7C5 8.65685 6.34315 10 8 10H10V11.2676C9.4022 11.6134 9 12.2597 9 13C9 14.1046 9.89543 15 11 15C12.1046 15 13 14.1046 13 13C13 12.2597 12.5978 11.6134 12 11.2676V10H14C15.6569 10 17 8.65685 17 7V5.73244C17.5978 5.38663 18 4.74028 18 4C18 2.89543 17.1046 2 16 2C14.8954 2 14 2.89543 14 4C14 4.74028 14.4022 5.38663 15 5.73244V7C15 7.55228 14.5523 8 14 8H8C7.44772 8 7 7.55228 7 7V5.73244C7.5978 5.38663 8 4.74028 8 4C8 2.89543 7.10457 2 6 2ZM6 4C6 3.44772 6.44772 3 7 3C7.55228 3 8 3.44772 8 4C8 4.55228 7.55228 5 7 5C6.44772 5 6 4.55228 6 4ZM11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13ZM16 3C15.4477 3 15 3.44772 15 4C15 4.55228 15.4477 5 16 5C16.5523 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3Z"/></svg><span id="hb-hb-embed-1664630854aa9703691263b9cb052844-forks">54</span></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> <a href="https://github.com/electronicminer/gesture-Christmas_tree-3d_with_photo/issues" target="_blank" rel="noopener" class="font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200" id="hb-hb-embed-1664630854aa9703691263b9cb052844-issues">3</a></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.56.56 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.56.56 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.56.56 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.56.56 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.56.56 0 0 0 .475-.345z"/></svg><span id="hb-hb-embed-1664630854aa9703691263b9cb052844-stars">88</span></div></div> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <p>图片隐私关系，我个人修改的库就不公开了。</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-13d3bb927730a2d3df03172cf2720880"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-zinc-700 to-zinc-800 flex items-center justify-center"> <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a9 9 0 0 1 7.843 4.582M12 3a9 9 0 0 0-7.843 4.582m15.686 0A11.95 11.95 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.96 8.96 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.9 17.9 0 0 1 12 16.5a17.9 17.9 0 0 1-8.716-2.247m0 0A9 9 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-13d3bb927730a2d3df03172cf2720880" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://%e5%82%a8%e5%ae%81%e5%ae%81.%e6%88%91%e7%88%b1%e4%bd%a0" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">Merry Christmass</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="text-sm text-zinc-500 dark:text-zinc-500">储宁宁.我爱你</span></div> </div> <div class="flex-shrink-0"> <a href="https://%e5%82%a8%e5%ae%81%e5%ae%81.%e6%88%91%e7%88%b1%e4%bd%a0" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3"> My Dear Ning </p> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <p> <figure > <div class="flex justify-center "> <div class="w-full" > <img alt="爆炸效果" srcset="https://yhk.life/blog/20251207-%E6%89%8B%E5%8A%BF%E4%BA%A4%E4%BA%92%E5%9C%A3%E8%AF%9E%E6%A0%91%E6%83%8A%E5%96%9C/expode_hu_14415a2192a8d53f.webp 320w, https://yhk.life/blog/20251207-%E6%89%8B%E5%8A%BF%E4%BA%A4%E4%BA%92%E5%9C%A3%E8%AF%9E%E6%A0%91%E6%83%8A%E5%96%9C/expode_hu_536151ec73bf75a.webp 480w, https://yhk.life/blog/20251207-%E6%89%8B%E5%8A%BF%E4%BA%A4%E4%BA%92%E5%9C%A3%E8%AF%9E%E6%A0%91%E6%83%8A%E5%96%9C/expode_hu_56d7e847d823d3bc.webp 760w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px" src="https://yhk.life/blog/20251207-%E6%89%8B%E5%8A%BF%E4%BA%A4%E4%BA%92%E5%9C%A3%E8%AF%9E%E6%A0%91%E6%83%8A%E5%96%9C/expode_hu_14415a2192a8d53f.webp" width="760" height="401" loading="lazy" data-zoomable /></div> </div></figure> </p> <p>下面贴上原项目介绍：</p> <h1 id="-grand-luxury-tree">🎄 Grand Luxury Tree</h1> <p> </p> <p>哈喽！这是一个为了庆祝圣诞节写的小项目。✨</p> <p>原本只是想画一棵普通的 3D 圣诞树，但觉得不够酷，于是加上了 <strong>手势识别</strong> 和 <strong>粒子特效</strong>。现在你可以通过摄像头“隔空”控制这棵树，还能把自己喜欢的照片挂上去。</p> <p>虽然只有几百行代码，但视觉效果拉满了（特别是在大屏幕上）。</p> <p>点击下面的链接可以直接访问： </p> <img width="2559" height="1439" alt="image" src="https://github.com/user-attachments/assets/45f3ec57-00b5-4989-b3b2-484772ad95cf" /> <h2 id="-这是啥intro">🤔 这是啥？(Intro)</h2> <p>这不是那种静态的网页贺卡。这是一棵由 <strong>几千个粒子</strong> 组成的动态树。 我接入了 Google 的 MediaPipe，所以它能看懂你的手势。</p> <ul> <li><strong>粒子特效</strong>：树会呼吸、旋转，还能炸裂成满天星。</li> <li><strong>隔空控物</strong>：不需要鼠标，对着摄像头挥挥手就能控制它（感觉像奇异博士）。</li> <li><strong>挂载回忆</strong>：点右上角的按钮上传照片，它们会变成带金框的拍立得，飘在树周围。</li> <li><strong>极简审美</strong>：只有黑金配色，没有花里胡哨的装饰，主打一个“高级感”。 <img width="2557" height="1291" alt="image" src="https://github.com/user-attachments/assets/d7d31b4c-bf4d-49b2-b922-79813bbddba5" /></li> </ul> <img width="2559" height="1294" alt="image" src="https://github.com/user-attachments/assets/d7e4e982-3042-449d-8898-105048aeac1d" /> <h2 id="-用了什么-tech">🛠️ 用了什么 (Tech)</h2> <p>纯纯的前端魔法，没用复杂的框架：</p> <ul> <li><strong>Three.js</strong> - 搞定 3D 渲染和粒子系统。</li> <li><strong>MediaPipe</strong> - 搞定手势识别（这东西太强了）。</li> <li><strong>原生 JS (ES Modules)</strong> - 手搓核心逻辑。</li> </ul> <h2 id="-怎么玩controls">🎮 怎么玩？(Controls)</h2> <p>第一次玩建议把音响打开（虽然还没加背景音乐，但你可以自己放首 Jingle Bells 🎵）。</p> <h3 id="-手势模式-重点">🖐️ 手势模式 (重点！)</h3> <p>确保浏览器允许使用摄像头，然后：</p> <ol> <li><strong>张开手掌 (🖐️)</strong>：这就是“炸裂模式”！树会散开变成星云，你可以转动视角。</li> <li><strong>握紧拳头 (✊)</strong>：收！粒子会重新聚合成圣诞树。</li> <li><strong>捏合手指 (🤏)</strong>：就像在捏东西一样，它会随机抓取一张照片放大给你看。</li> </ol> <h3 id="-鼠标党">🖱️ 鼠标党</h3> <ul> <li>左键拖拽旋转，滚轮缩放。</li> <li><strong>H 键</strong>：按下可以隐藏所有 UI，用来截图或录屏当壁纸很棒。</li> </ul> <h2 id="-跑起来-how-to-run">🚀 跑起来 (How to Run)</h2> <p>⚠️ <strong>注意：</strong> 因为用到了 ES Modules 和摄像头权限，<strong>千万不要直接双击 <code>index.html</code> 打开</strong>，浏览器会报错（CORS 策略限制）。你得起一个本地服务器。</p> <p><strong>如果你有 VS Code (推荐):</strong> 装个 <code>Live Server</code> 插件，右键 <code>index.html</code> -&gt; &ldquo;Open with Live Server&rdquo;。搞定。</p> <p><strong>如果你是 Python 大佬:</strong> 在目录下打开终端：</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">python -m http.server <span class="m">8000</span> </span></span></code></pre></div><p>然后浏览器访问 <code>localhost:8000</code>。</p> <p><strong>如果你习惯 Node.js:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx http-server . </span></span></code></pre></div><p><strong>Merry Christmas! 🎅</strong> 如果你觉得这项目有点意思，欢迎 Star，或者 Fork 改成你喜欢的颜色！</p> <p>新增移动端网页支持</p> <h2 id="contributors-">Contributors ✨</h2> <p>感谢所有为本项目做出贡献的开发者：</p> <a href="https://github.com/electronicminer/gesture-Christmas_tree-3d_with_photo/graphs/contributors"> <img src="https://contrib.rocks/image?repo=electronicminer/gesture-Christmas_tree-3d_with_photo" /> </a> <h2 id="-star-history">📊 Star History</h2> <p> </p>