├── README.md └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Magic Christmas Tree 🎄✨ 2 | 3 | 一个基于 WebGL (Three.js) 和计算机视觉 (MediaPipe) 的交互式 3D 圣诞树体验。 4 | 5 | 6 | ## ✨ 特性 (Features) 7 | 8 | * **沉浸式 3D 视觉**: 使用 Three.js 构建的粒子系统，包含金球、银块、红蓝宝石和辉光效果 (Bloom)。 9 | * **AI 手势识别**: 集成 Google MediaPipe，无需任何穿戴设备，通过摄像头即可控制。 10 | * **物理交互**: 11 | * ✊ **握拳 (Fist)**: 将星云粒子聚合成一棵旋转的圣诞树。 12 | * 🖐 **张手 (Open Palm)**: 粒子炸开成宇宙星云状态。 13 | * 👋 **挥动 (Wave)**: 在星云状态下，像拨动地球仪一样旋转视角（带有物理惯性）。 14 | * 👌 **捏合 (Pinch)**: 智能抓取并放大查看上传的照片。 15 | * **回忆画廊**: 支持上传本地照片，照片会自动挂载在树上或漂浮在星云中。 16 | 17 | ## 🚀 快速开始 (How to Run) 18 | 19 | ### 方法 1: fork这个项目,顺手点颗✨（推荐） 20 | 21 | 开启 Pages: 进入仓库 Settings -> 左侧 Pages -> 在 Branch 处选择 main (或 master) -> 点击 Save。 22 | 访问: 等待几分钟，访问 https://你的用户名.github.io/仓库名/。 23 | 24 | image 25 | image 26 | 27 | 方法 2: 直接本地双击html文件打开 28 | 29 | ## 🛠️ 技术栈 (Tech Stack) 30 | - Three.js (r160): 核心 3D 渲染引擎。 31 | 32 | - Three.js Post-processing: 用于实现辉光 (Bloom) 和色调映射 (Tone Mapping)。 33 | 34 | - MediaPipe Hand Landmarker: 实时手部骨骼检测。 35 | 36 | - HTML5/CSS3: 响应式布局与 UI 界面。 37 | 38 | ## ⚙️ 配置 (Configuration) 39 | 在代码顶部的 CONFIG 对象中可以调整视觉参数： 40 | ```bash 41 | JavaScript 42 | 43 | const CONFIG = { 44 | goldCount: 500, // 金球数量 45 | bloomStrength: 0.7, // 辉光强度 46 | treeHeight: 75, // 树的高度 47 | // ... 48 | }; 49 | ``` 50 | ## 📝 注意事项 51 | - 摄像头权限: 首次打开时浏览器会请求摄像头权限，请点击“允许”。 52 | 53 | - 性能: 建议在带有独立显卡的 PC 或高性能手机上运行。代码已针对性能进行了优化（如手势检测节流），但在老旧设备上可能会有卡顿。 54 | 尝试解决办法：开启浏览器图形加速后重启浏览器，再打开 55 | image 56 | 57 | - 环境光: 请确保您所处的环境光线充足，以便摄像头能准确识别手势。 58 | 59 |
个人QQ
作者QQ
QQ：154578485		QQ交流群
QQ群二维码
群内会更新个人练手的python项目		微信赞赏
微信赞赏码
要到饭咧？啊咧？啊咧？不给也没事~ 请随意打赏		支付宝赞赏
支付宝赞赏码
如果觉得有帮助,来包辣条犒劳一下吧~
60 | 61 | Merry Christmas! 🎁 62 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Magic Christmas Tree - Hand Interaction 7 | 103 | 104 | 112 | 113 | 114 | 115 |
116 |
117 | 118 |
119 | 120 | 121 |
122 | 123 | 124 | 125 |
126 |

Merry Christmas

127 |
初始化引擎...
128 |
129 | • 握拳 : 聚合圣诞树
130 | • 张手 : 星云散开
131 | • 挥动 : 旋转视图 (仅散开时)
132 | • 捏合 : 抓取照片 (需上传) 133 |
134 | 135 | 136 |
137 |
CRAFTING MAGIC...
138 |
139 | 140 | 818 | 819 | 820 | --------------------------------------------------------------------------------