# visual-effects

**Repository Path**: zqa2048/visual-effects

## Basic Information

- **Project Name**: visual-effects
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-20
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ✨ 视觉特效合集

> 使用 Three.js 和 MediaPipe 实现的酷炫网页特效

## 🌟 项目列表

### 1. 3D星球 - 手势控制
- **路径**: `1-特效-3D星球/`
- **技术栈**: Three.js, MediaPipe Hands
- **特性**:
  - ✋ 手势识别旋转星球
  - 🖐️ 张开手极速放大
  - ✊ 握拳快速拉远
  - 🎨 粒子系统 + UnrealBloom 后处理
  - 🎯 动态阻尼精准控制

### 2. 粒子心脏 - 告白特效
- **路径**: `2-告白特效-粒子心脏/`
- **技术栈**: Canvas 2D
- **特性**: 粒子动画效果

## 🚀 快速开始

### 在线访问
- **GitHub Pages**: [即将部署]
- **Gitee Pages**: [即将部署]

### 本地运行

由于使用了摄像头和手势识别，需要在本地服务器环境下运行：

#### 方法 1: 使用 VS Code Live Server
1. 安装 VS Code 扩展 "Live Server"
2. 右键点击 `index.html` → "Open with Live Server"

#### 方法 2: 使用 Python
```bash
# Python 3
python3 -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000
```

#### 方法 3: 使用 Node.js
```bash
npx http-server -p 8000
```

然后访问 `http://localhost:8000`

## 📋 浏览器要求

- 现代浏览器（Chrome/Edge/Firefox 最新版）
- 支持 WebGL
- 支持 getUserMedia API（摄像头权限）
- 建议使用 HTTPS 或 localhost

## 🔧 技术说明

### 3D星球项目
- **Three.js r128**: 3D 渲染引擎
- **MediaPipe Hands**: Google 手势识别 AI 模型
- **后处理效果**: UnrealBloom 辉光效果
- **交互优化**: 
  - 低通滤波平滑控制
  - 动态阻尼系统
  - 边缘检测防止误触

## 📄 License

MIT License - 自由使用和修改

## 👨‍💻 Author

zq

---

⭐ 如果觉得有用，请给个 Star！