🌌 Real-time Interactive 3D Particle System Controlled by Gestures 🌌
A creative particle effects application combining computer vision and 3D graphics technology
ZenParticles is a web-based real-time 3D particle system application that uses MediaPipe gesture recognition technology, allowing users to interact with particles through gestures via webcam.
| Feature | Description |
|---|---|
| 🎨 Color Selection | Multiple preset colors + custom color picker |
| ⚡ Rotation Speed | Adjustable auto-rotation speed |
| 🔵 Particle Size | Flexible particle size control |
| 📹 Camera Preview | Toggleable gesture recognition display |
| 🖥️ Fullscreen Mode | Immersive experience |
| Technology | Purpose |
|---|---|
| ⚛️ React 19 | UI Framework |
| 🎮 Three.js | 3D Graphics Rendering |
| 🌐 React Three Fiber | React renderer for Three.js |
| 👁️ MediaPipe | Gesture Recognition & Computer Vision |
| ⚡ Vite | Fast Development Build Tool |
| 📘 TypeScript | Type Safety |
| 🎨 Tailwind CSS (CDN) | Utility-first CSS Framework |
| 🎯 Lucide React | Icon Library |
ZenParticles/
├── index.html # HTML Entry
├── index.tsx # React Application Entry
├── App.tsx # Main Application Component
├── types.ts # TypeScript Type Definitions
├── metadata.json # Application Metadata
├── components/
│ ├── ParticleScene.tsx # 3D Particle Scene
│ ├── HandTracker.tsx # Gesture Tracking Module
│ └── Controls.tsx # UI Control Panel
├── utils/
│ └── geometry.ts # Particle Geometry Generation Algorithm
├── vite.config.ts # Vite Configuration
└── tsconfig.json # TypeScript Configuration
Allow Camera Permission - Grant camera access when prompted for the first time
Keep Hands Visible - Ensure your hands are within the camera's field of view
Proper Lighting - Good lighting conditions improve gesture recognition accuracy
Try Different Shapes - Each particle shape offers unique visual effects