autonomy learning for middle schoolers
Interactive 3D Phalanges Hand Anatomy
An interactive educational project that uses MediaPipe hand tracking and Three.js to visualize the phalanges and hand bones in real time.
When the user raises their hand to the camera, the system detects 21 hand landmarks and overlays a detailed 3D hand model that moves with their gestures.
The project combines 3D visualization, gesture recognition, and web-based interaction to make learning anatomy more immersive. I worked on the full interactive system, including rigging, real-time movement mapping, and UI elements, to create a smooth, responsive learning experience.
Final Interactive Project.
The finished project is an interactive 3D hand anatomy experience.
When the user lifts their hand to the camera, the system instantly tracks their movement and displays a real-time 3D model of the phalanges that follows each gesture.
I also added a frame-by-frame animated character that appears on screen with voice-over narration, guiding the user and explaining each part of the phalanges in a simple, engaging way.
The final result blends education, animation, and interactivity, allowing learners to explore hand anatomy through both visual explanation and real-time motion. It brings together 3D design, animation rigs, hand tracking, UI, and storytelling into one smooth, intuitive learning tool.
Development Process.
This project began as an experiment in combining real-time hand tracking with 3D visualization for an educational tool.
During development, I integrated MediaPipe to detect 21 hand landmarks and built a custom system in Three.js to drive a 3D hand model using those live coordinates.
My work included setting up the camera pipeline, mapping the landmark data to the model’s joints, handling pose accuracy, optimizing performance, and designing simple UI elements for testing.
The goal during development was to create a responsive, smooth interaction between the user's real hand and the digital anatomy model.