├── .DS_Store ├── .github └── FUNDING.yml ├── demo.png ├── index.html └── readme.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/collidingScopes/threejs-handtracking-101/96d682dd2cc3a4c0aa5a237d0ba841adf24f2fb3/.DS_Store -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [collidingScopes] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/collidingScopes/threejs-handtracking-101/96d682dd2cc3a4c0aa5a237d0ba841adf24f2fb3/demo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hand Tracking Demo with Three.js 7 | 8 | 82 | 83 | 84 |
85 | 86 | 87 |
88 |
Loading MediaPipe...
89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 502 | 503 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 3D Hand Tracking Demo 2 | 3 | A threejs / WebGL / MediaPipe-powered interactive demo that allows you to control a 3D sphere using hand gestures. 4 | 5 | 6 | 7 | ## Demo 8 | 9 | Try the live demo: [https://collidingscopes.github.io/threejs-handtracking-101/](https://collidingscopes.github.io/threejs-handtracking-101/) 10 | 11 | ## Features 12 | 13 | - **Real-time hand tracking** using MediaPipe Hands 14 | - **Left hand gesture control:** Pinch thumb and index finger to resize the 3D sphere 15 | - **Right hand interaction:** Touch the sphere with your index finger to change its color 16 | - **Responsive design** that works on desktop and mobile browsers 17 | - **Visual feedback** with color-coded hand tracking 18 | 19 | ## Requirements 20 | 21 | - Modern web browser with WebGL support 22 | - Camera access 23 | - No additional software or downloads needed 24 | 25 | ## Technologies 26 | 27 | - **Three.js** for 3D rendering 28 | - **MediaPipe** for hand tracking and gesture recognition 29 | - **HTML5 Canvas** for visual feedback 30 | - **JavaScript** for real-time interaction 31 | 32 | ## Setup for Development 33 | 34 | ```bash 35 | # Clone this repository 36 | git clone https://github.com/collidingScopes/threejs-handtracking-101 37 | 38 | # Navigate to the project directory 39 | cd threejs-handtracking-101 40 | 41 | # Serve with your preferred method (example using Python) 42 | python -m http.server 43 | ``` 44 | 45 | Then navigate to `http://localhost:8000` in your browser. 46 | 47 | ## License 48 | 49 | MIT License 50 | 51 | ## Credits 52 | 53 | - Three.js - https://threejs.org/ 54 | - MediaPipe - https://mediapipe.dev/ 55 | 56 | ## Related Projects 57 | 58 | Check out other free and open-source projects by the same developer: 59 | 60 | - [Particular Drift](https://collidingScopes.github.io/particular-drift) - Turn photos into flowing particle animations 61 | - [Liquid Logo](https://collidingScopes.github.io/liquid-logo) - Transform logos and icons into liquid metal animations 62 | - [Video-to-ASCII](https://collidingScopes.github.io/ascii) - Convert videos into ASCII pixel art 63 | - [Shape Shimmer](https://collidingScopes.github.io/shimmer) - Turn photos into funky wave animations 64 | - [Colliding Scopes](https://collidingScopes.github.io) - Turn photos into kaleidoscope animations 65 | - [Manual Brick Breaker](https://manual-brick-breaker.netlify.app) - Play brick breaker by waving your hands around 66 | 67 | ## Contact 68 | 69 | - Instagram: [@stereo.drift](https://www.instagram.com/stereo.drift/) 70 | - Twitter/X: [@measure_plan](https://x.com/measure_plan) 71 | - Email: [stereodriftvisuals@gmail.com](mailto:stereodriftvisuals@gmail.com) 72 | - GitHub: [collidingScopes](https://github.com/collidingScopes) 73 | 74 | ## Donations 75 | 76 | If you found this tool useful, feel free to buy me a coffee. 77 | 78 | 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! 79 | 80 | [![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/stereoDrift) --------------------------------------------------------------------------------