https://github.com/collidingscopes/threejs-handtracking-101
A threejs / WebGL / MediaPipe-powered interactive demo that allows you to control a 3D sphere using hand gestures.
https://github.com/collidingscopes/threejs-handtracking-101
3d computer-vision free gestures hand hand-tracking mediapipe open-source threejs tutorial webgl
Last synced: 21 days ago
JSON representation
A threejs / WebGL / MediaPipe-powered interactive demo that allows you to control a 3D sphere using hand gestures.
- Host: GitHub
- URL: https://github.com/collidingscopes/threejs-handtracking-101
- Owner: collidingScopes
- Created: 2025-05-08T15:27:50.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-05-24T12:34:08.000Z (8 months ago)
- Last Synced: 2025-05-24T13:48:15.914Z (8 months ago)
- Topics: 3d, computer-vision, free, gestures, hand, hand-tracking, mediapipe, open-source, threejs, tutorial, webgl
- Language: HTML
- Homepage: https://collidingscopes.github.io/threejs-handtracking-101/
- Size: 4.57 MB
- Stars: 82
- Watchers: 4
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# 3D Hand Tracking Demo
A threejs / WebGL / MediaPipe-powered interactive demo that allows you to control a 3D sphere using hand gestures.
## Demo
Try the live demo: [https://collidingscopes.github.io/threejs-handtracking-101/](https://collidingscopes.github.io/threejs-handtracking-101/)
## Features
- **Real-time hand tracking** using MediaPipe Hands
- **Left hand gesture control:** Pinch thumb and index finger to resize the 3D sphere
- **Right hand interaction:** Touch the sphere with your index finger to change its color
- **Responsive design** that works on desktop and mobile browsers
- **Visual feedback** with color-coded hand tracking
## Requirements
- Modern web browser with WebGL support
- Camera access
- No additional software or downloads needed
## Technologies
- **Three.js** for 3D rendering
- **MediaPipe** for hand tracking and gesture recognition
- **HTML5 Canvas** for visual feedback
- **JavaScript** for real-time interaction
## Setup for Development
```bash
# Clone this repository
git clone https://github.com/collidingScopes/threejs-handtracking-101
# Navigate to the project directory
cd threejs-handtracking-101
# Serve with your preferred method (example using Python)
python -m http.server
```
Then navigate to `http://localhost:8000` in your browser.
## License
MIT License
## Credits
- Three.js - https://threejs.org/
- MediaPipe - https://mediapipe.dev/
## Related Projects
Check out other free and open-source projects by the same developer:
- [Particular Drift](https://collidingScopes.github.io/particular-drift) - Turn photos into flowing particle animations
- [Liquid Logo](https://collidingScopes.github.io/liquid-logo) - Transform logos and icons into liquid metal animations
- [Video-to-ASCII](https://collidingScopes.github.io/ascii) - Convert videos into ASCII pixel art
- [Shape Shimmer](https://collidingScopes.github.io/shimmer) - Turn photos into funky wave animations
- [Colliding Scopes](https://collidingScopes.github.io) - Turn photos into kaleidoscope animations
- [Manual Brick Breaker](https://manual-brick-breaker.netlify.app) - Play brick breaker by waving your hands around
## Contact
- Instagram: [@stereo.drift](https://www.instagram.com/stereo.drift/)
- Twitter/X: [@measure_plan](https://x.com/measure_plan)
- Email: [stereodriftvisuals@gmail.com](mailto:stereodriftvisuals@gmail.com)
- GitHub: [collidingScopes](https://github.com/collidingScopes)
## Donations
If you found this tool useful, feel free to buy me a coffee.
My name is Alan, and I enjoy building open source software for art, animation, games, and more. This would be much appreciated during late-night coding sessions!
[](https://www.buymeacoffee.com/stereoDrift)