The project is designed to create an interactive 3D visualization of hand landmarks detected in real-time from a video stream, using the MediaPipe Hands model and THREE.js for 3D rendering. It dynamically updates the positions of 3D objects representing hand landmarks based on the detected landmarks, adjusts the camera's position to follow the hand movements, and includes logic to recognize specific hand gestures. The visualization is rendered in a web environment, allowing users to see the hand landmarks in 3D space as they move their hands in front of the camera.
To run the project, follow these steps:
- Ensure you have a modern web browser installed.
- Open the
index.htmlfile in your web browser. - Allow access to your camera when prompted.
index.html: The main HTML file that loads the project.main.js: The JavaScript file that contains the logic for the 3D visualization, including the setup of the THREE.js scene, the MediaPipe Hands model, and the logic for updating the 3D objects based on the detected hand landmarks.
- THREE.js: A JavaScript library used for creating and displaying animated 3D computer graphics in a web browser.
- MediaPipe Hands: A machine learning model for detecting hand landmarks in real-time from a video stream.
- The project uses the MediaPipe Hands model to detect hand landmarks in real-time from the video stream captured by the user's camera.
- The detected hand landmarks are then used to update the positions of 3D objects in the THREE.js scene, creating a visual representation of the hand landmarks in 3D space.
- The camera's position is dynamically adjusted to follow the hand movements, providing a more immersive experience.
- Specific hand gestures are recognized, and the visualization responds accordingly, such as adding or removing objects from the scene.
Contributions are welcome! Please feel free to submit pull requests or open issues if you have any suggestions or improvements.