Gemini 3 手势交互控制 创意case合集

Gemini 3 手势交互控制 创意case合集 Gemini 3 手势交互控制 创意case合集 Modified December 9, 2025 Audio or video is not supported Please download the file and open it with the appropriate software. 0bc3zeagqaaaxmadv2bi5vuvbsodndeqa2aa.f10002.mp4 · 16.07MB 0bc3zeagqaaaxmadv2bi5vuvbsodndeqa2aa.f10002 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 12月5日.mp4 · 8.55MB 12月5日 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. copy F2EEC69C F326 46AB BE34 4CA61A591841.mov · 12.30MB copy F2EEC69C F326 46AB BE34 4CA61A591841 00:00 Code block Plain Text Copy 视觉：复古街机风：深紫色/黑色背景，粉色 ( ff00de) 霓虹边框，CRT 扫描线滤镜覆盖全屏。字体：引用 Google Fonts "Press Start 2P"。画质：强制关闭 Canvas 平滑处理 (imageSmoothingEnabled = false) 以保持像素锯齿感。 角色与生成：用代码绘制三种简单的像素块风格角色，配色参考宝可梦（紫色耿鬼、蓝色杰尼龟、橙色小火龙）。开局生成 30个 娃娃，随机堆叠在画面右侧的地面上。 双模控制： 优先：MediaPipe手势（食指移动，捏合抓取）。 兜底：若无摄像头，自动降级为鼠标控制（移动瞄准，点击抓取）。 抓取逻辑： 状态机管理（待机 移动 下落 抓取 上升 归位 松开）。 高难度判定：只有爪子中心与玩偶中心垂直水平完全对齐才算抓中，否则抓空。 自动归位：抓到娃娃后，抓手必须移动到左侧掉落区正上方，才能松开爪子。 物理与计分： 深坑机制：画面左侧20%为掉落区，坑底高度低于右侧地面。 入库锁定：玩偶掉入坑底后，变为半透明、计分，且无法再次被抓取。 防作弊：右侧地面与坑之间有隐形墙，地面上的玩偶无法滚入坑内，只能从上方扔入。 音效：使用 Oscillator 生成 8 bit 投币、移动、成功音效。 游戏流程： 初始为黑色遮罩开始界面，点击“INSERT COIN”按钮后请求全屏及摄像头权限并开始游戏。右上角显示实时分数（Collected Count）。 请输出一段完整的、可直接运行的 HTML 代码。 No access AI像素抓娃娃.html 测试By小谷 AR手势射击游戏 在线运行方式： 1. 打开网站：https://codepen.io/pen/ 2. 把所有代码粘贴到 HTML 框里。 prompt： Code block Plain Text Copy 请帮我写一个单文件 HTML 的 AR 手势射击游戏。 1. 核心玩法： 手势：识别“手枪”手势（食指瞄准，大拇指扣动触发射击）。 敌人：屏幕四周随机生成飞盘飞向中心，同屏保持 4个，击碎立刻补位。 体验：要有磁吸辅助瞄准（准心吸附飞盘）、激光指示线、打击音效和 "HIT/MISS" 浮动文字特效。 2. 关键防报错要求（必须执行）： 使用 Three.js 和 MediaPipe Hands。 强制版本锁定：MediaPipe 资源必须使用 unpkg 源且版本锁死为 0.4.1646424915，防止 WASM 版本不匹配导致崩溃。 No access ai studio code (1).html 测试By小谷 AR手势切水果 prompt： Code block Plain Text Copy 任务： 编写一个单文件 HTML AR 手势切水果游戏。 技术栈： Three.js + MediaPipe Hands。 1. 布局与视觉（必须执行）： 画中画镜像： 摄像头画面缩小至屏幕右下角（约 320x180），并CSS水平翻转（镜像）。主画布全屏显示深色 3D 网格背景。 手势映射： 追踪食指指尖，映射坐标需适配“镜像”逻辑（手向右移，屏幕光标向右移），并显示发光跟随光标和青色刀光拖尾。 2. 3D 资产（纯代码生成，无外部模型）： 西瓜： 球体 + CanvasTexture 绘制绿色条纹。 香蕉： 使用 TubeGeometry 生成弯曲形状，黄色。 榴莲： 使用 IcosahedronGeometry (detail=1) 模拟尖刺，黄褐色。 苹果/芒果： 红色带梗球体 / 橙色椭球体。 炸弹： 黑色球体 + 顶部引信 + 闪烁火花。 3. 交互与反馈： 物理： 物体从底部抛物线抛出。 判定： 刀光切中水果 分裂 + 爆浆粒子；切中炸弹 屏幕剧烈震动（CSS Shake）+ 黑烟。 音效： 使用 Web Audio API 实时合成（不加载 mp3）：挥刀（白噪 Swoosh）、切中（锯齿波 Splat）、爆炸（方波 Boom）。 4. 强制防报错约束（最高优先级）： 版本锁死： MediaPipe 资源路径（JS 和 locateFile）必须指向 unpkg.com 且版本严格锁定为 0.4.1646424915（防止 WASM 崩溃）。 环境兼容： <video 标签必须包含 muted autoplay playsinline。添加 file:// 协议运行时的 Alert 警告。 No access ai studio code (2).html 测试By 宋昊 3D数据可视化 Audio or video is not supported Please download the file and open it with the appropriate software. 智慧城市全域感知平台 URBAN DATA BRAIN Google Chrome 2025 12 05 23 53 15.mp4 · 73.39MB 智慧城市全域感知平台 URBAN DATA BRAIN Google Chrome 2025 12 05 23 53 15 00:00 prompt： Code block Markdown Copy 角色设定 你是一位精通 Three.js 和 ECharts 的高级前端图形工程师，请编写一个单文件 HTML 页面，创建一个科技风格的智慧城市数据可视化大屏。根据领导满意程度，你将获得1 10000$的奖励 核心视觉要求 整体色调 整体风格为蓝色科技大屏风格，背景颜色（ 0x333558），完全去除雾气 (No Fog)，以保持画面极度锐利、清晰，符合数据大屏的高对比度要求。 色调映射 使用 ACESFilmicToneMapping，曝光度 (Exposure) 设置为 1.3 左右，确保画面明亮通透。 光照系统 环境光 (AmbientLight)：强度 10，0x808aa0，填补阴影细节。 平行光 (DirectionalLight)：强度 10+，0xddccff，开启阴影 (MapSize 2048)，模拟主光源。 材质风格 建筑：MeshStandardMaterial : {color：0xffffff，roughness: 0.3, metalness: 0} 纹理：使用 Canvas 动态生成“科技感窗户”纹理，生成2种纹理随机赋予建筑，每种纹理要求（深色底色+浅色亮点），使用 NearestFilter 保持像素锐度。 场景生成逻辑 地面 创建地面，使用three.js默认的网格模式 网格系统 (Grid System)： 请使用 InstancedMesh 优化性能，生成逻辑如下： 定义 CellSize（例如 70）和 RoadWidth（例如 20）。 街区聚落 (Clusters)：不要在一个网格里只放一个大方块。 细分逻辑：在每个网格的安全区域内（即减去道路宽度后），将其划分为 3x3 的子网格。 在子网格中随机生成 1 5 个子建筑，每个子建筑有随机的高度和宽度缩放，并在它们之间留出微小的缝隙（巷道），形成错落有致的建筑群细节。 高度分布：遵循“中心高、四周低”的指数衰减规律，偶发随机地标高楼。 建筑纹理：使用前面动态生成的多个纹理，随机赋予建筑。 动态特效系统 (Dynamic Effects) 流光车流 (Traffic Trails) 外观：细长的光束（如 0.3 x 0.3 x 5），模拟长曝光摄影效果。 材质：自发光材质，分为亮红和亮蓝和亮绿三种颜色。 生成逻辑：严格对齐网格线的道路坐标，绝对禁止与建筑穿模。 运动：数量稀疏（不要拥堵），速度缓慢且优雅，方向有两种，分别沿X轴与Z轴运动，且按照光束拉长的方向移动。 数据粒子 在城市上空生成缓慢上升的半透明青色粒子，象征数据的流动。 巡航无人机 添加几架带有扫描光锥（ConeGeometry + Transparent）和点光源的无人机，在城市上空做随机巡航动画。 程序化生成注意点 生成建筑时应该有随机性，每个建筑的高度与宽度要有变化。 UI 与交互 (UI & Interaction) 界面风格 智慧城市/城市大脑大屏风格（中文界面） 布局 顶部：标题栏“智慧城市全域感知平台 / URBAN DATA BRAIN”置于顶部中间，当前日期以及天气至于顶部右侧。 左右两侧：半透明磨砂玻璃面板（深色背景），配有青色边框和发光文字。 ECharts 图表： 左侧：柱状图（区域能耗）、折线图（CPU 负载）。 右侧：雷达图（城市综合指标）、滚动日志区域（模拟系统事件）。 图表背景要适配内容 交互逻辑： 集成 OrbitControls（关闭自转） 集成 Raycaster：点击任意建筑时，显示高亮包围盒（BoxHelper），并触发 ECharts 图表数据刷新。 AI 手势交互系统 技术栈：引入 @mediapipe/tasks vision (HandLandmarker)，使用 GPU 加速。 摄像头反馈：在屏幕底部中央显示半透明的摄像头预览窗（水平镜像翻转），带有边框和“AI ONLINE”状态指示。 交互逻辑 基于 Three.js Spherical 坐标运算（重点注意） 必须通过球坐标运算来手动控制旋转，如果代码中使用了 OrbitControls 的内部非公开方法会导致报错 单手控制： 握拳 (Fist)：触发场景旋转 (Rotate)。计算拳头在画面中的位移 Delta，映射到相机的 theta (水平) 和 phi (垂直) 角。 张手 (Open Palm)：触发场景平移 (Pan)。模拟拖拽地图效果，移动相机的 position 和 target。 双手控制： 双手缩放 (Zoom)：检测左右手腕/掌心的距离。 距离变大 放大 (Zoom In/Dolly In)，即减小相机半径。 距离变小 缩小 (Zoom Out/Dolly Out)，即增加相机半径。 平滑处理：所有手势输入必须经过插值 (Lerp) 或阻尼处理，避免画面抖动。 UI 反馈：当识别到手势时，在屏幕中央下方显示当前手势图标（如 ✊/✋/👐）和状态文本。 技术规范 代码自查 写完的代码必须重复检查看是不是有格式错误。 模块加载策略 (严厉执行) 使用 <script type="importmap" 加载 Three.js (v0.160.0) 和 Addons (OrbitControls)，确保路径正确（three/addons/...）。 echarts版本：echarts@5.4.3 全 ES Module 模式：除 ECharts 等老牌 UMD 库外，对于 Three.js 及其插件、Mediapipe 等现代化库，必须通过 ES Module (import) 方式加载。 禁止非法 Script 标签：严禁对包含 export/import 语法的 ESM 库（如 vision bundle.js）使用普通的 <script src="..." 标签，这会导致 Unexpected token export 错误。 导入方式：请在 <script type="module" 内部通过 CDN URL 直接 import，或者配置在 importmap 中。 文件结构 所有 CSS、JS、HTML 包含在一个文件中，无外部纹理图片依赖（纹理全靠 Canvas 代码生成），可直接运行。 代码组织与执行顺序： 代码： Code block HTML Copy <!DOCTYPE html <html lang="zh CN" <head <meta charset="UTF 8" <meta name="viewport" content="width=device width, initial scale=1.0" <title 智慧城市全域感知平台 | URBAN DATA BRAIN</title <style / 全局样式 / body { margin: 0; overflow: hidden; background color: 000; font family: "Microsoft YaHei", sans serif; user select: none; } / UI 布局 / ui layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer events: none; z index: 10; display: flex; flex direction: column; justify content: space between; } / 顶部标题栏 / .header { height: 80px; background: linear gradient(to bottom, rgba(10,15,30,0.95), rgba(10,15,30,0)); display: flex; justify content: space between; align items: center; padding: 0 40px; border bottom: 1px solid rgba(0,255,255,0.3); pointer events: auto; } .title { font size: 32px; font weight: bold; color: fff; text shadow: 0 0 10px 00ffff; letter spacing: 2px; } .sub title { font size: 14px; color: 00ffff; opacity: 0.7; letter spacing: 1px; } .info panel { text align: right; color: fff; } .time { font size: 24px; font weight: bold; font family: monospace; } .weather { font size: 14px; color: add8e6; } / 侧边栏容器 / .main content { flex: 1; display: flex; justify content: space between; padding: 20px; box sizing: border box; } / 玻璃拟态面板 / .glass panel { width: 350px; height: 100%; background: rgba(16, 20, 35, 0.6); backdrop filter: blur(10px); border: 1px solid rgba(0, 255, 255, 0.2); box shadow: 0 0 15px rgba(0, 0, 0, 0.5); display: flex; flex direction: column; gap: 20px; padding: 15px; pointer events: auto; border radius: 4px; } .panel title { color: 00ffff; border left: 4px solid 00ffff; padding left: 10px; font size: 16px; font weight: bold; margin bottom: 10px; background: linear gradient(90deg, rgba(0,255,255,0.1), transparent); } / ECharts 容器 / .chart box { flex: 1; width: 100%; min height: 200px; position: relative; } .log box { flex: 1; overflow: hidden; font family: monospace; font size: 12px; color: 0f0; background: rgba(0,0,0,0.3); padding: 10px; } .log item { margin bottom: 4px; border bottom: 1px dashed 333; } / 摄像头与AI状态 / .ai control panel { position: absolute; bottom: 20px; left: 50%; transform: translateX( 50%); display: flex; gap: 20px; align items: flex end; pointer events: none; z index: 20; } .cam container { position: relative; 测试By prompt： Code block Plain Text Copy https:/ /codepen.io/pen/ Audio or video is not supported Please download the file and open it with the appropriate software. 0bc3zeagqaaaxmadv2bi5vuvbsodndeqa2aa.f10002.mp4 · 16.07MB 0bc3zeagqaaaxmadv2bi5vuvbsodndeqa2aa.f10002 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 0bc3zeagqaaaxmadv2bi5vuvbsodndeqa2aa.f10002.mp4 · 16.07MB 0bc3zeagqaaaxmadv2bi5vuvbsodndeqa2aa.f10002 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 12月5日.mp4 · 8.55MB 12月5日 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 12月5日.mp4 · 8.55MB 12月5日 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. copy F2EEC69C F326 46AB BE34 4CA61A591841.mov · 12.30MB copy F2EEC69C F326 46AB BE34 4CA61A591841 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. copy F2EEC69C F326 46AB BE34 4CA61A591841.mov · 12.30MB copy F2EEC69C F326 46AB BE34 4CA61A591841 00:00 No access AI像素抓娃娃.html No access AI像素抓娃娃.html 测试By小谷 AR手势射击游戏 在线运行方式： 1. 打开网站：https://codepen.io/pen/ https:/ /codepen.io/pen/ 2. 把所有代码粘贴到 HTML 框里。 prompt： No access ai studio code (1).html No access ai studio code (1).html 测试By小谷 AR手势切水果 prompt： No access ai studio code (2).html No access ai studio code (2).html 测试By 宋昊 3D数据可视化 Audio or video is not supported Please download the file and open it with the appropriate software. 智慧城市全域感知平台 URBAN DATA BRAIN Google Chrome 2025 12 05 23 53 15.mp4 · 73.39MB 智慧城市全域感知平台 URBAN DATA BRAIN Google Chrome 2025 12 05 23 53 15 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 智慧城市全域感知平台 URBAN DATA BRAIN Google Chrome 2025 12 05 23 53 15.mp4 · 73.39MB 智慧城市全域感知平台 URBAN DATA BRAIN Google Chrome 2025 12 05 23 53 15 00:00 prompt： 代码： 测试By prompt： 🏆 Gemini 3 通过 MediaPipe 实现了强大的摄像头手势识别，让零代码用户也能开发科幻级交互应用。 Gemini 3 通过 MediaPipe 实现了强大的摄像头手势识别，让零代码用户也能开发科幻级交互应用。 测试By 咖啡 prompt： 测试By 何阳 prompt： 测试Byxshui小水 prompt： 第一版 测试By小谷 像素抓娃娃机 prompt：