圣诞节马上就要到了，属于程序员的浪漫圣诞树网页在每年的这个时候都会再火一次，今年借助gemini3pro模型圣诞树又升级了，加入了手势交互功能。
- 交互逻辑和状态：有合拢态（初始状态）、散开态和照片放大态三种状态。
- 手势动作：握拳回到合拢态，打开五指进入散开态，手旋转在散开态下调整相机角度，抓的动作进入照片放大态。
- 网页打开步骤：保存 gemini 3 pro 生成的 html 文件，在网页打开，允许摄像头权限，上传照片，推荐使用 chrome 浏览器。
由于网络原因谷歌的js需要工具才能加载，懂得都懂。
ai生成提示词：完整提示词参考 编写一个包含HTML、CSS和JavaScript的单文件应用。该应用需要结合 Three.js 和 MediaPipe Hands 来创建一个基于手势控制的3D粒子特效系统 1、<整体氛围:> -主色系为哑光绿 + 金属金+圣诞红色； -有电影感的辉光与光晕效果，整体金碧辉煌且满满高级感 -圣诞树由 若干球、正方体、糖果棍和照片云等元素构成，其中照片的内容通过上传获得 2、<交互逻辑和状态:> 1、圣诞树状态
- 合拢态（初始状态）：所有元素收拢、聚合为一个圣诞树圆锥体。
- 散开态：所有元素在空间中无序漂浮、散落
- 照片放大态：在背景保持散开态的同时，放大单张照片 3、<手势动作:>
- 握拳表示回到合拢态
- 打开五指表示进入到散开态
- 手旋转表示在散开态的状态下，对画面进行旋转，根据手的移动调整相机角度
- 抓的动作表示抓住一张照片，进入照片放大态 4、<交互要求:> 需要根据手势，在几个状态之间平滑切换，带有过渡动画。
