3D手势跟随圣诞树Prompt

角色设定：

你是一位世界级的 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) 处理加载。
📝 详细开发规格说明书

1. 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 推理。
2. 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) 用于冷暖对比。
3. 粒子系统与内容 (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);
4. 状态机与动画逻辑 (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)。
   其他粒子作为背景散开。
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 代码。

---