创意交互

Three.js + MediaPipe 手势识别特效源码：实现 AI 摄像头控制 3D 粒子凝聚与散开

?源码简介： 本源码是一套基于 Three.js 与 Google MediaPipe 开发的高级 AI 视觉交互系统。它不依赖于鼠标或键盘，而是通过电脑或手机的前置摄像头实时追踪手部骨骼关节点。 ? 核心功能： AI 手势精准识别：利用 MediaPipe Hands 模型，实时判断用户的“握拳”与“张手”状态。 形态无缝变换（Morphing）： 握拳 (Fist)：万千粒子迅速向中心靠拢，形成一个完美的 3D 均匀球体。 张手 (Open Hand)：粒子瞬间失去引力，随机散开，充满整个 3D 空间。 动态位移追踪：粒子云会根据手部在画面中的水平位置（X轴）实时旋转偏移，实现随手而动的交互感。 高性能渲染：采用 BufferGeometry 处理 12,000+ 高数量级粒子，确保在移动端也能流畅运行。 ? 使用与部署说明： 环境要求：必须在 HTTPS 环境下运行，否则浏览器将出于安全隐私原因拒绝调用摄像头。 本地调试：建议使用 VS Code Live Server 或建立虚拟主机进行测试。 ?交互提示： 初始化时请给予浏览器“摄像头访问”权限。 将手掌置于镜头中央，待 AI...

2026-05-05 免费

剑侠君特供：3D 图片粒子动画+Web Speech 语音声控源码，支持移动端 HTTPS 完美运行

这是一款基于 Three.js 开发的 3D 视觉交互特效源码。它打破了传统的鼠标点击交互，实现了实时语音指令控制粒子形态切换。 代码可以将一张普通的 JPG/PNG 图片（默认使用动漫人物图）动态像素化，并支持在“初始散开”、“还原图片”、“凝聚球体”三种形态间通过中文指令无缝切换。 图片像素动态化：自动提取图片色彩与坐标，转化为成千上万个 3D 粒子。 中文声控交互： 喊 “还原”：粒子从四面八方汇聚，精准拼凑出动漫原图。 喊 “收起来”：粒子迅速向中心靠拢，形成一个不断自转的发光球体。 喊 “散开”：粒子瞬间炸裂，随机漂浮在 3D 空间。 GPU 加速渲染：使用 GLSL 编写顶点着色器（Vertex Shader），确保在粒子数量达到数万个时，画面依然丝滑不卡顿。 跨端适配：针对手机端（Safari/Chrome）进行了性能优化与权限补丁修复。 为了确保源码在你和用户手中完美运行，请务必注意以下几点： HTTPS 协议：由于现代浏览器（Chrome、Safari 等）的隐私安全限制，必须在 HTTPS 环境下才能调用麦克风权限。 本地测试：在自己的电脑上测试时，请使用 VS C...

2026-05-05 免费