12-18 19320人
圣诞节将至，仪式感如何营造？是装点一棵实体圣诞树，还是简单发一张节日海报？今年，不妨试试更有科技感的打开方式——一棵能读懂你的手势、展现你的记忆、听你指挥旋转聚合的「3D Christmas Tree」。
介绍
纯静态 HTML+CSS+JS 构建，用粒子、光影与图像组合成一棵立体动态的圣诞树。
借助 AI 手势识别，张开手掌即可让圣诞树 绽放 为漫天粒子，握拳又能使其瞬间复原；左右挥手还能带动视角流转，交互体验流畅而充满魔力。
你还可以将它变成属于自己的记忆之树：只需点击上传照片（不上传云端，本地解析 Base64，确保隐私安全），会将上传的照片环绕树身，打造一棵独一无二的回忆圣诞树。
最主要的是整个项目完全依靠 CPU 即可流畅运行，无需高端显卡或复杂环境配置，让数字艺术变得触手可及，每个人都能轻松体验。
使用体验
下载源码后，双击直接浏览器打开就行，有基础的可以部署到服务器上。
记得给摄像头权限
张开手势
张开手即可粒子散开，来回移动或者转可使粒子也来回转动
握拳手势
握拳即可聚合树形
捏夹手势
大拇指与食指捏住皆可以随机打开一张照片聚焦
上传照片
- 点击右上角 “上传照片”
- 选择图片
- 使用捏合手势切换
隐藏UI
按 H 键隐藏界面，享受纯3D体验
源码分享
此处内容已隐藏，评论 后刷新即可查看
提示词
或者你自己想试一下让 AI 帮你生成，这里也有一些我整理好的描述词分享给你。
此处内容已隐藏，评论 后刷新即可查看
感觉还可以
不赖的
特别是那个通过Base64加载本地照片生成“记忆树”的功能，
求
博主，这套手势控制3D粒子的源码太棒了！特别是那个通过Base64加载本地照片生成“记忆树”的功能，隐私处理得很到位。我最近在研究如何将这种高性能的3D粒子交互应用到更复杂的数据可视化分析中，比如展示一些高频变动的行业实时数据。我在查阅哥伦比亚一个技术审计站点时，看到他们提到了一些关于复杂架构下数据稳定性的内容，链接是 https://guiaderivalocolumbia.com/ ，我想请教一下，如果我想把这套圣诞树的粒子引擎改为动态接入外部API实时渲染海量节点，Gemini3 生成的这段逻辑在CPU负载优化上还有哪些可以压榨的空间？期待您的指点！
哈哈哈
哈皮
哈哈哈哈哈哈哈哈哈
好
好