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
连播
清屏
智能
倍速
点赞616
Ai罗伊1周前
新手全录屏做出gemini相册圣诞树 你是一位精通Three.js、WebGL和计算机视觉的创意前端开发专家。 任务:编写一个包含HTML、CSS和JavaScript的单文件应用。该应用需要结合 Three.js 和 MediaPipe Hands 来创建一个基于手势控制的3D粒子特效系统。 #角色设定: 你是一位精通Three.js、WebGL和视觉设计前端开发。 #任务目标 编写一个包含HTML、CSS和JavaScript的单文件应用。该应用需要结合 Three.js 和 MediaPipe Hands 来创建一个基于手势控制的3D粒子+照片云构成的圣诞树。 #要求 1、<整体内容:> -主色系:哑光绿 + 金属金+圣诞红色; -有电影感的辉光与光晕效果,整体金碧辉煌有高级感 -圣诞树由 若干球、正方体、糖果棍和照片云等元素构成,照片通过上传获取。 2、<交互逻辑和状态:> 1、圣诞树状态 合拢态(初始状态):所有元素收拢、聚合为一个圣诞树圆锥体。 散开态:所有元素在空间中无序漂浮、散落 照片放大态:在背景保持散开态的同时,放大单张照片 3、<手势动作:> 握拳表示回到合拢态 打开五指表示进入到散开态 手旋转表示在散开态的状态下,对画面进行旋转,根据手的移动调整相机角度 抓的动作表示抓住一张照片,进入照片放大态 4、<交互要求:> 需要根据手势,在几个状态之间平滑切换,带有过渡动画。 ##包括但不限于使用以下技术栈 Three.js、WebGL、instanced Mesh、Shaders / GLSL、MediaPipe Hands #ai #编程 #圣诞 #圣诞礼物 #粒子圣诞树
00:00 / 01:24
连播
清屏
智能
倍速
点赞19