超炫酷！基于 Three.js+MediaPipe 实现 3D 粒子手势控制特效（附核心框架代码）
本文介绍了一个基于纯前端技术的3D粒子手势交互系统，采用Three.js+MediaPipe实现电影级视觉效果。系统支持6万粒子高精度渲染、UE4级泛光效果，通过摄像头实时手势识别实现手掌开合缩放和移动旋转控制。项目采用模块化设计，包含粒子生成、3D渲染、手势识别和UI控制四大核心模块，使用CSS变量和毛玻璃效果打造现代化控制面板。关键技术包括自定义Shader粒子材质、MediaPipe手势检测
前言
大家好，最近在研究 WebGL 与前端视觉交互，发现Three.js+MediaPipe组合能做出极具科技感的 3D 交互效果。本文带大家从零复现电影级 3D 粒子手势控制系统，支持爱心 / 球体两种粒子模型、手势缩放 / 旋转、颜色 / 大小 / 速度自定义，全程纯前端实现，无需后端服务。
项目核心亮点：
- 6 万粒子高精度渲染，支持 UE4 级泛光效果
- 摄像头实时手势识别，手掌开合缩放、移动旋转
- 可视化控制面板，自定义粒子颜色、大小、旋转速度
- 自适应全屏，移动端 / PC 端兼容
一、项目技术栈
本项目采用纯前端技术栈，轻量化、易部署、无环境依赖：
- Three.js 0.160.0：3D 场景搭建、粒子系统、后期泛光处理
- MediaPipe HandLandmarker：浏览器端实时手势关键点检测
- 原生 ES6 Module：模块化开发，CDN 引入依赖
- CSS 变量 + 毛玻璃：现代化 UI 控制面板
二、整体架构设计
项目分为四大核心模块，逻辑清晰、易于扩展：
- 粒子生成模块：生成爱心 / 球体粒子坐标数据
- 3D 渲染模块：场景、相机、渲染器、粒子材质、后期泛光
- 手势识别模块：MediaPipe 加载、摄像头调用、手势解析
- UI 控制模块：下拉选择、颜色拾取、滑块、按钮交互
三、HTML 结构（核心框架）
页面结构极简，分为加载遮罩、控制面板、画布容器、摄像头预览四部分，代码只保留核心骨架：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D粒子手势控制系统</title>
<!-- CSS变量与毛玻璃样式 -->
<style>
/* 全局变量、全屏、控制面板、加载动画样式（略） */
</style>
<!-- 依赖导入映射 -->
<script type="importmap">
{
"imports": {
"three": "cdn地址",
"three/addons/": "cdn地址",
"@mediapipe/tasks-vision": "cdn地址"
}
}
</script>
</head>
<body>
<!-- 加载遮罩 -->
<div id="system-overlay">...</div>
<!-- 控制面板 -->
<div id="control-panel">
模型选择、颜色拾取、大小/缩放/速度滑块、开关按钮...
</div>
<!-- 3D画布 -->
<div id="canvas-container"></div>
<!-- 摄像头预览 -->
<div id="webcam-wrapper"><video id="webcam" autoplay></video></div>
<script type="module">
// 核心逻辑代码（框架版）
</script>
</body>
</html>
四、CSS 样式（现代化 UI）
采用CSS 变量 + backdrop-filter实现毛玻璃控制面板，深色科技风主题，关键样式：
- 全局变量统一主题色、背景、边框
- 全屏画布、定位控制面板与摄像头预览
- 自定义滑块、颜色拾取器、按钮样式
- 加载动画与过渡效果提升体验
五、JS 核心逻辑框架（重点！）
1. 全局状态管理
统一管理粒子参数、手势数据、控制状态，方便全局修改：
const STATE = {
currentShape: 'heart', // 当前模型
particleColor: '#ff3366', // 粒子颜色
particleCount: 60000, // 粒子数量
particleSize: 3.0, // 粒子大小
modelScale: 1.0, // 模型缩放
autoRotate: true, // 自动旋转
rotateSpeed: 0.3, // 旋转速度
handRotateX: 0, handRotateY: 0 // 手势旋转角度
};
2. 粒子坐标生成
生成爱心与球体两种高精度粒子坐标，支持 6 万粒子：
function generateGeometricMatrices() {
// 爱心粒子坐标生成（数学公式）
// 球体粒子坐标生成（斐波那契球面）
// 存入数组备用
}
3. 3D 场景初始化
搭建 Three.js 基础环境，添加泛光后期处理：
function initPostProcessingEngine() {
// 1. 创建场景、相机、渲染器
// 2. 添加轨道控制器、阻尼、自动旋转
// 3. 后期通道：RenderPass + UnrealBloomPass
// 4. 创建自定义Shader粒子材质
// 5. 初始化粒子系统并加入场景
}
4. 自定义 Shader 粒子材质
使用顶点着色器 + 片元着色器实现圆形渐变粒子，支持颜色与大小动态修改：
particleMaterial = new THREE.ShaderMaterial({
uniforms: { uColor, uTime, uSize },
vertexShader: `...`, // 顶点逻辑
fragmentShader: `...`, // 圆形粒子、透明度
transparent: true,
blending: THREE.AdditiveBlending
});
5. MediaPipe 手势识别
加载手势模型、调用摄像头、解析手掌关键点：
- 手掌开合控制粒子缩放
- 手掌移动控制 3D 模型旋转
async function initVisionAI() {
// 1. 初始化MediaPipe视觉任务
// 2. 创建HandLandmarker手势检测器
// 3. 申请摄像头权限
// 4. 循环检测手势并更新STATE
}
async function predictGestureLoop() {
// 逐帧检测视频
// 计算手掌开合距离 → 缩放
// 计算手掌中心坐标 → 旋转
}
6. UI 交互控制
绑定面板事件，实时修改粒子效果：
function setupUI() {
// 模型切换（爱心/球体）
// 颜色拾取器同步
// 粒子大小、模型缩放、旋转速度滑块
// 自动旋转开关
// 重置视角按钮
}
7. 渲染循环
每帧更新粒子位置、应用手势旋转、执行渲染：
function renderLoop() {
requestAnimationFrame(renderLoop);
// 粒子缓动移动到目标坐标
// 应用手势旋转矩阵
// 更新缓冲区 → 渲染场景
}
六、关键功能实现说明
1. 6 万粒子高性能渲染
- 使用
BufferGeometry批量存储顶点 - 关闭
depthWrite，开启AdditiveBlending - 像素比率限制为 2，平衡画质与性能
2. 手势控制逻辑
- 拇指→小指根部距离判断开合 → 缩放
- 手掌中心坐标偏移 → 转换为旋转角度
- 平滑插值，避免抖动
3. 后期泛光效果
使用UnrealBloomPass实现电影级发光，提升科技感。
4. 响应式适配
监听resize事件，动态更新相机与渲染器尺寸。
七、运行与部署
- 直接用浏览器打开 HTML 文件（需 HTTPS/localhost）
- 允许摄像头权限
- 点击进入界面，开始手势交互
- 可直接部署到 GitHub Pages / 静态服务器
八、效果展示
九、总结与扩展方向
本文完整复现了3D 粒子手势交互系统，核心技术：
- Three.js 粒子系统与 Shader 定制
- MediaPipe 轻量手势检测
- 纯前端可视化控制
扩展方向：
- 添加更多粒子模型（星星、文字、模型）
- 接入语音控制
- 适配 VR/AR 模式
- 保存 / 分享配置
openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)