{"id":34546317,"url":"https://github.com/collidingscopes/threejs-handtracking-101","last_synced_at":"2026-03-14T11:31:48.131Z","repository":{"id":292193507,"uuid":"980114026","full_name":"collidingScopes/threejs-handtracking-101","owner":"collidingScopes","description":"A threejs / WebGL / MediaPipe-powered interactive demo that allows you to control a 3D sphere using hand gestures.","archived":false,"fork":false,"pushed_at":"2025-05-24T12:34:08.000Z","size":4792,"stargazers_count":82,"open_issues_count":0,"forks_count":12,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-24T13:48:15.914Z","etag":null,"topics":["3d","computer-vision","free","gestures","hand","hand-tracking","mediapipe","open-source","threejs","tutorial","webgl"],"latest_commit_sha":null,"homepage":"https://collidingscopes.github.io/threejs-handtracking-101/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/collidingScopes.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["collidingScopes"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2025-05-08T15:27:50.000Z","updated_at":"2025-05-24T12:34:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"a79a1acc-881f-432c-83b9-ba828a85bb41","html_url":"https://github.com/collidingScopes/threejs-handtracking-101","commit_stats":null,"previous_names":["collidingscopes/threejs-handtracking-101"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/collidingScopes/threejs-handtracking-101","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fthreejs-handtracking-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fthreejs-handtracking-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fthreejs-handtracking-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fthreejs-handtracking-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/collidingScopes","download_url":"https://codeload.github.com/collidingScopes/threejs-handtracking-101/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fthreejs-handtracking-101/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27997216,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","computer-vision","free","gestures","hand","hand-tracking","mediapipe","open-source","threejs","tutorial","webgl"],"created_at":"2025-12-24T07:04:57.909Z","updated_at":"2025-12-24T07:05:34.104Z","avatar_url":"https://github.com/collidingScopes.png","language":"HTML","readme":"# 3D Hand Tracking Demo\n\nA threejs / WebGL / MediaPipe-powered interactive demo that allows you to control a 3D sphere using hand gestures.\n\n\u003cimg src=\"demo.png\"\u003e\n\n## Demo\n\nTry the live demo: [https://collidingscopes.github.io/threejs-handtracking-101/](https://collidingscopes.github.io/threejs-handtracking-101/)\n\n## Features\n\n- **Real-time hand tracking** using MediaPipe Hands\n- **Left hand gesture control:** Pinch thumb and index finger to resize the 3D sphere\n- **Right hand interaction:** Touch the sphere with your index finger to change its color\n- **Responsive design** that works on desktop and mobile browsers\n- **Visual feedback** with color-coded hand tracking\n\n## Requirements\n\n- Modern web browser with WebGL support\n- Camera access\n- No additional software or downloads needed\n\n## Technologies\n\n- **Three.js** for 3D rendering\n- **MediaPipe** for hand tracking and gesture recognition\n- **HTML5 Canvas** for visual feedback\n- **JavaScript** for real-time interaction\n\n## Setup for Development\n\n```bash\n# Clone this repository\ngit clone https://github.com/collidingScopes/threejs-handtracking-101\n\n# Navigate to the project directory\ncd threejs-handtracking-101\n\n# Serve with your preferred method (example using Python)\npython -m http.server\n```\n\nThen navigate to `http://localhost:8000` in your browser.\n\n## License\n\nMIT License\n\n## Credits\n\n- Three.js - https://threejs.org/\n- MediaPipe - https://mediapipe.dev/\n\n## Related Projects\n\nCheck out other free and open-source projects by the same developer:\n\n- [Particular Drift](https://collidingScopes.github.io/particular-drift) - Turn photos into flowing particle animations\n- [Liquid Logo](https://collidingScopes.github.io/liquid-logo) - Transform logos and icons into liquid metal animations\n- [Video-to-ASCII](https://collidingScopes.github.io/ascii) - Convert videos into ASCII pixel art\n- [Shape Shimmer](https://collidingScopes.github.io/shimmer) - Turn photos into funky wave animations\n- [Colliding Scopes](https://collidingScopes.github.io) - Turn photos into kaleidoscope animations\n- [Manual Brick Breaker](https://manual-brick-breaker.netlify.app) - Play brick breaker by waving your hands around\n\n## Contact\n\n- Instagram: [@stereo.drift](https://www.instagram.com/stereo.drift/)\n- Twitter/X: [@measure_plan](https://x.com/measure_plan)\n- Email: [stereodriftvisuals@gmail.com](mailto:stereodriftvisuals@gmail.com)\n- GitHub: [collidingScopes](https://github.com/collidingScopes)\n\n## Donations\n\nIf you found this tool useful, feel free to buy me a coffee. \n\nMy 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!\n\n[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/stereoDrift)","funding_links":["https://github.com/sponsors/collidingScopes","https://www.buymeacoffee.com/stereoDrift"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollidingscopes%2Fthreejs-handtracking-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcollidingscopes%2Fthreejs-handtracking-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollidingscopes%2Fthreejs-handtracking-101/lists"}