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

哈喽，大家好

我是阿星👋

破防了！谁还在画二维圣诞树？

Gemini3直接让大家用手势隔空操控3D世界！👇（提示词2000字完整版pinglun区我分享给大家）点击播放看效果👀

它主要实现的效果如下👇🏻

🌌隔空捏合，粒子瞬间聚焦到你上传的节日照片上

👋张开手掌 - 1500个金色粒子"砰"地炸开成星云

✊轻松握拳 - 粒子螺旋汇聚

🛰手部追踪 - 整个3D场景跟着你的手旋转！

第一步：复制这段提示词

提示词放在这里了

发给gemini3的builder就可以啦

（提示词2000字完整版，pinglun区我分享给大家）

typescript 复制代码

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

ruby 复制代码

🚀 Prompt:  "  Christmas Tree" WebGL 互动项目角色设定：你是一位世界级的 Creative Technologist，精通 Three.js (WebGL)、GLSL 着色器逻辑以及 Google MediaPipe 计算机视觉集成。任务目标：请编写一个单文件 (Single-File) 的 HTML 项目，文件名为  Christmas   Tree   代码。该项目必须包含完整的 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 (白到金) 实现文字渐变色，并加辉光阴影。隐藏逻辑： 定义 CSS 类............

注意：这些要素一定要保留提示词里的精华给AI看，这些不要删👇🏻

角色：你是精通Three.js和MediaPipe的前端专家

视觉：极简奢华，用Cinzel和Times New Roman字体

核心：一定要用@mediapipe/tasks-vision做手势识别

功能：捏合→聚焦照片，张开→散开，握拳→聚合成树

这些是一定要保留的不能从提示词里删除

第二步：在chrome中执行

打开Gemini3（或其他支持长文本的AI）

粘贴完整的提示词

等待AI生成一个完整的HTML文件代码

将AI生成的代码保存为 christmas_tree.html

（你可以自己命名）

在浏览器中双击打开

允许网页使用你的摄像头✅才能进行手势识别

见证奇迹：你的手现在就是遥控器！

第三步：手势圣诞树原理揭秘

视觉核心：Three.js + PBR 材质系统

"不是画出来的，是算出来的奢华感。"

技术点： 使用 WebGL 的封装库 Three.js (r160) 。
亮点： PBR (Physically Based Rendering) 物理材质全线使用
通过 MeshStandard 和 MeshPhysical，让"金子"拥有真实的金属反射率（Metalness）和粗糙度（Roughness）。
环境光照： 利用------ RoomEnvironment 和 PMREMGenerator 生成高动态范围的环境贴图，让每一颗粒子都能反射出周围并不存在的"虚拟豪宅"光影。

氛围营造：后期处理 (Post-Processing)

"给代码加一层好莱坞滤镜。"

• 技术点： Three.js 的特效合成器 EffectComposer 。
• 核心特效： UnrealBloomPass (虚幻辉光) 。
• 原理： 这不仅仅是简单的发光，而是模拟摄像机镜头的过曝效果。提取场景中的高亮阈值（Threshold），进行高斯模糊后叠加，才有了那层梦幻的"香槟金光晕"。

交互大脑：Google MediaPipe (Edge AI)

"把浏览器变成《少数派报告》。"

• 技术点： Google 的 MediaPipe Tasks Vision (@0.10.3) 。
• 亮点： 纯前端推理 。不需要任何后端服务器，直接利用 WebAssembly (WASM) 调用本地 GPU，在浏览器里实时进行手部 21 个关键点的 3D 追踪。
• 逻辑： 计算指尖距离，将"捏合"、"张开"、"握拳"等手势映射为粒子系统的状态机触发器。

数学之美：粒子系统与插值算法

"秩序与混沌的数学表达。"

• 技术点： 自定义粒子类与 Lerp (线性插值) 。
• 实现： 1500 个粒子并不是生硬地瞬移。我们为每个粒子定义了"树形态"和"星云形态"两套坐标系。在状态切换时，通过 Vector3.lerp() 函数，让粒子在每一帧之间平滑过渡，实现了如同流体般的变形效果。

快去试试吧～给对象做一个～🌝🌝绝对是好感度拉满～

没对象的给自己做一个～😂

我是阿星！更多AI应用

我们下期再见👋