gemini3 手势互动圣诞树保姆级教程来了！附提示词

🚀 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.jsthree/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 代码。