gemini3手势互动圣诞树手把手教程来了! 破防了!还在画二维圣诞树?Gemini3直接让大家用手势隔空操控3D世界! 这个圣诞树的源码朋友一发我我都惊呆了,立马玩了下来分享给大家~致敬原作者! 💥看看这效果,简直是前端魔法: ▪️ 隔空捏合 - 粒子瞬间聚焦到你上传的节日照片上 ▪️ 张开手掌 - 1500个金色粒子“砰”地炸开成星云 ▪️ 轻松握拳 - 粒子螺旋汇聚 ▪️ 手部追踪 - 整个3D场景跟着你的手旋转! 🎯 极简制作步骤(跟着做就行): ✅ 第一步:复制这段“魔法提示词” 把用户提供的完整提示词(从“角色设定:你是一位精通Three.js...”到“确保性能优化,处理窗口Resize事件。”)完整复制下来。这相当于给了AI一个超级详细的产品需求文档。 保留提示词里的精华给AI看: 提示词是阿星根据代码反推的,主要要保留的点如下: 角色:你是精通Three.js和MediaPipe的前端专家 视觉:极简奢华,用Cinzel和Times New Roman字体 核心:一定要用@mediapipe/tasks-vision做手势识别 功能:捏合→聚焦照片,张开→散开,握拳→聚合成树 ✅ 第二步:在Gemini3中执行 打开Gemini3(或其他支持长文本的AI) 粘贴完整的提示词 等待AI生成一个完整的HTML文件代码 ✅ 第三步:运行你的魔法圣诞树 将AI生成的代码保存为 christmas_tree.html 在浏览器中双击打开 允许网页使用你的摄像头 见证奇迹:你的手现在就是遥控器! ✅ 第四步:高级玩法(自定义) 在代码中搜索项目里的固定名称,替换成你自己的祝福语图片 点击“Add Memories”按钮,上传你的节日照片,它会自动变成金色相框混入粒子中 按‘H’键隐藏界面,获得纯净的沉浸式体验 快去试试吧~给对象做一个~ 没对象的给自己做一个~ 绝对是好感度拉满~ #gemini3 #prompt #AI交互 #圣诞树 #ai #工具推荐 #gemini
00:00 / 01:46
连播
清屏
智能
倍速
点赞353
00:00 / 02:22
连播
清屏
智能
倍速
点赞96
Heccocce3天前
完全不会代码,用Gemini尝试了做了最近大热的手势控制圣诞树,手掌张开合拢旋转圣诞树,确实非常有意思。但是做下来没有想象中简单。记录下我的设计思路和使用Gemini踩过的坑。 圣诞树由魔法球、礼物盒、糖果手杖、金星等悬浮元素构成。设计了三种状态和四种手势 三大核心状态 (States): 🎄 聚合态 (TREE): 初始状态。所有粒子有序排列成圣诞树,缓慢旋转,伴随铃铛声。 ✨ 散开态 (SCATTERED): 粒子打破秩序,在空间中漂浮、漫游,伴随风铃声。这是进入“回忆模式”的过渡状态。 🖼️ 聚焦态 (ZOOM): 选中某一张照片粒子,镜头拉近,背景虚化,展示照片细节,伴随“Whoosh”音效。(照片由用户从Manage Memories按钮上传,照片自动被处理为拍立得样式展示) 手势控制映射 (Gestures): ✊ 握拳 (FIST): “秩序”。强行将所有散落的粒子吸附回来,重新组装成圣诞树。 🖐 张开五指 (OPEN PALM): “释放”。将树炸开,粒子散落。 👌 捏合 (PINCH): “抓取”。在散开状态下,随机抓取一张照片并放大查看。 👋 手掌移动: 视差控制。手的在空中的位置直接映射摄像机的角度(Rot X/Y),实现“手眼随动”的视差效果。 主要踩的几个坑: 1️⃣最开始使用gemini build模式,输入提示词后,一直报错 — autofix — retry循环,以为它自行修复报错,实际不行。删除了谷歌浏览器的缓存才终于没有报错。 2️⃣如果对gemini提过于细节的要求,有时候它会以一种诡异的方式实现,这时候你可以尝试比较general的指令。比如我最开始指定了圣诞树的组成元素,它做出来却是单薄的几何体,改了几次都不理想,直接让他改成圣诞元素组成的圣诞氛围圣诞树反而成果比较接近我想要的,再做一些微调即可。 3️⃣对圣诞树微调时,最好不要一次性给太多指令,gemini会选择性执行。并且,一步步调整,在某一步调整不理想时,也方便使用restore回到上一版本。 4️⃣微调时需要非常有耐心,因为AI经常不能够一步到位达到你想要的效果,需要你不停测试然后告诉它现在问题在哪里需要改什么。 #圣诞的100种打开方式 #圣诞树 #Gemini #vibecoding #新发现
00:00 / 00:33
连播
清屏
智能
倍速
点赞10
00:00 / 04:48
连播
清屏
智能
倍速
点赞30