Gemini3生成手势控制3D粒子交互

Gemini3的3D粒子交互的出现，也是体验了一把隔空交互。
本文实现的是圣诞树上挂有图片，使用手势交互实现图片的查看 ，源项目可见：https://download.csdn.net/download/weixin_42311968/92462897

实现的主体功能大约如下：

1.3D粒子态的圣诞树

2.定义手势动作（握拳）功能：聚拢树

3.定义手势动作（张开）功能：散开为粒子

4.定义手势动作（拿捏）功能：放大图片

5.定义手势动作（比个耶）功能：切换图片

6.支持清空和重新上传图片

7.etc

以下给出具体的项目实现步骤：

1.进入Gemini3官方网址：https://aistudio.google.com/apps，打开对话框Build→Start

2.投喂通用实现内容后会自动生成一个html文件（该文件根据实际情况会有一些小问题，后续我会给出调优点）：

实现的主体功能大约如下：

1.3D粒子态的圣诞树

2.定义手势动作（握拳）功能：聚拢树

3.定义手势动作（张开）功能：散开为粒子

4.定义手势动作（拿捏）功能：放大图片

复制代码

角色设定：
你是一位世界级的 Creative Technologist，精通 Three.js (WebGL)、GLSL 着色器逻辑以及 Google MediaPipe 计算机视觉集成。
任务目标：
请编写一个单文件 (Single-File) 的 HTML 项目，文件名为圣诞树。该项目必须包含完整的 HTML 结构、CSS 样式和基于 ES Module 的 JavaScript 代码。
核心技术栈约束 (必须严格遵守)：
依赖管理： 使用 <script type="importmap"> 引入：
three: https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js
three/addons/: https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/
@mediapipe/tasks-vision: https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/+esm
代码风格： 使用现代 ES6+ 语法，类 (Class) 结构管理粒子，异步/等待 (Async/Await) 处理加载。
📝 详细开发规格说明书
UI 设计与 CSS 样式 (Visual Identity)
字体： 引入 Google Fonts 'Cinzel' (标题) 和 'Times New Roman' (正文)。
配色： 背景 #000000。主色调：香槟金 #d4af37，奶油白 #fceea7。
UI 组件：
Loader： 黑色全屏遮罩，中间为 40px 的金色旋转 Spinner (border-top: 1px solid #d4af37)，下方文字 "LOADING HOLIDAY MAGIC"。初始化完成后淡出。
标题： 顶部居中 <h1> "Merry Christmas"，字号 56px，使用 CSS linear-gradient (白到金) 实现文字渐变色，并加辉光阴影。
上传控件： 一个带有 .upload-wrapper 类的容器。按钮样式为半透明磨砂玻璃 (backdrop-filter: blur)，边框金色，文字 "ADD MEMORIES"。
提示文本： 按钮下方显示 "Press 'H' to Hide Controls"。
隐藏逻辑： 定义 CSS 类 .ui-hidden (opacity: 0; pointer-events: none)。监听键盘 H 键切换此状态。
Webcam： 在右下角创建一个不可见的容器 (opacity: 0)，包含 <video> 和 160x120 的 <canvas> 用于 CV 推理。
Three.js 场景构建 (Scene Setup)
渲染器： WebGLRenderer (antialias: true)，toneMapping 设置为 ReinhardToneMapping (曝光 2.2)。
相机： 透视相机，位置 (0, 2, 50)。
环境 (Environment)： 使用 RoomEnvironment 配合 PMREMGenerator 生成高反射金属环境贴图。
后期处理 (Post-Processing)：
使用 EffectComposer。
添加 UnrealBloomPass (辉光特效)。参数必须为： resolution (window size), strength: 0.45, radius: 0.4, threshold: 0.7。
灯光系统：
AmbientLight (0.6)。
内部 PointLight (橙色, 强度 2)。
SpotLight (金色, 强度 1200, 位置 30,40,40)。
SpotLight (蓝色, 强度 600, 位置 -30,20,-30) 用于冷暖对比。
粒子系统与内容 (Content Generation)
粒子总数： 约 1500 个主体粒子 + 2500 个尘埃粒子。
几何体混合：
BoxGeometry: 材质为金色和深绿色 MeshStandardMaterial。
SphereGeometry: 材质为金色和红色 MeshPhysicalMaterial (红色带 clearcoat)。
Candy Cane (糖果手杖): 使用 CatmullRomCurve3 生成弯钩路径，配合 TubeGeometry。必须程序化生成纹理：使用 Canvas 2D API 绘制白底红斜纹，创建 CanvasTexture。
照片墙功能：
默认生成一张写有 "JOYEUX NOEL" 的 Canvas 纹理照片。
照片必须包裹在金色的相框 (BoxGeometry) 中。
图片上传实现（必须精确复现以下代码逻辑）：
codeJavaScript
// 监听 input change 事件
reader.onload = (ev) => {
new THREE.TextureLoader().load(ev.target.result, (t) => {
t.colorSpace = THREE.SRGBColorSpace; // 关键：指定色彩空间
addPhotoToScene(t);
});
}
reader.readAsDataURL(f);
状态机与动画逻辑 (State Machine & Logic)
定义全局 STATE 对象，包含模式 (mode) 和手势数据。在 animate 循环中根据模式计算目标位置并使用 lerp 平滑过渡。
Mode 1: TREE (树模式)
粒子排列成螺旋圆锥体。公式参考：radius = maxRadius * (1 - t), angle = t * 50 * PI.
Mode 2: SCATTER (散落模式)
粒子分布在半径 8~20 的球体范围内。
重要： 在此模式下，粒子必须根据自身的随机速度向量进行自转 (Rotation)。
Mode 3: FOCUS (聚焦模式)
随机选中一张照片 (type === 'PHOTO') 作为目标。
目标照片移动到相机前方 (0, 2, 35) 并放大 (Scale 4.5)。
其他粒子作为背景散开。
MediaPipe 计算机视觉集成 (Computer Vision)
模型加载： 使用 FilesetResolver 和 HandLandmarker。设置 delegate: "GPU"。
手势识别算法 (Process Gestures)：
获取关键点：拇指(4), 食指(8), 手腕(0), 其他指尖(12,16,20)。
Pinch (捏合)： Math.hypot(thumb - index) < 0.05 -> 触发 FOCUS 模式。
Fist (握拳)： 四指尖到手腕平均距离 < 0.25 -> 触发 TREE 模式。
Open Hand (张开)： 四指尖到手腕平均距离 > 0.4 -> 触发 SCATTER 模式。
交互映射：
将手掌中心 (Landmark 9) 的标准化 X/Y 坐标，映射为 3D 场景根容器 (mainGroup) 的 rotation.y 和 rotation.x。
请输出完整的、包含所有这些细节的单文件 HTML 代码。