An interactive web application that helps users understand which muscles are targeted by specific exercises through detailed 3D visualization.
This project bridges the gap between exercise theory and visual understanding by providing an engaging, educational tool that shows exactly which muscles are worked during different exercises. Users can explore a detailed 3D human anatomy model and see real-time muscle highlighting based on their exercise selection.
- 3D Human Anatomy Model: Detailed anatomical figure with smooth rotation and zoom controls
- Workout Selection Interface: Searchable exercise database with intuitive sidebar navigation
- Real-time Muscle Highlighting:
- Primary muscles highlighted in red (main muscles worked)
- Secondary muscles highlighted in orange (supporting muscles)
- Exercise Information: Comprehensive instructions and muscle group breakdowns
- Realistic Materials: Matte skin tones with proper lighting for enhanced visual quality
- Smooth Navigation: Intuitive 3D controls for optimal viewing angles
- Responsive Design: Works seamlessly across different screen sizes
- React + TypeScript: Modern, type-safe component architecture
- Three.js/React Three Fiber: Powerful 3D rendering and scene management
- Custom GLB Model: Segmented 3D model with 29 separate muscle groups
- Modular Structure: Clean component organization with separated data layers
- Custom Muscle Segmentation: Overcame single-mesh limitations through Blender model segmentation
- Optimized Performance: Efficient 3D rendering with smooth real-time highlighting
# Clone the repository
git clone https://github.com/yourusername/peak-fit.git
# Navigate to project directory
cd peak-fit
# Install dependencies
pnpm install
# Start development server
pnpm run dev
# Start production server
pnpm run start- Select an Exercise: Browse or search through the exercise database in the sidebar
- View Muscle Targeting: Watch as the 3D model highlights primary (red) and secondary (orange) muscles
- Explore the Model: Use mouse controls to rotate, zoom, and examine the anatomy from different angles
- Read Exercise Details: Access comprehensive information about proper form and muscle engagement
- Understand which muscles are targeted by specific exercises
- Learn proper muscle engagement for optimal workout results
- Visual guide for creating balanced muscle development routines
- Identify complementary exercises for comprehensive training
- Quick muscle group identification for exercise selection
- Educational tool for fitness professionals and enthusiasts
- Initial Setup: Basic 3D model loading and camera controls
- Lighting & Materials: Enhanced visual quality with proper lighting systems
- Muscle Highlighting Challenge: Solved single-mesh limitations through custom Blender segmentation
- Visual Refinement: Achieved realistic appearance and precise muscle highlighting
- Feature Integration: Combined all components into a cohesive, user-friendly application
We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow TypeScript best practices
- Maintain component modularity
- Test 3D rendering changes across different devices
- Ensure accessibility standards are met
This project is licensed under the MIT License - see the LICENSE file for details.
- Anatomy model created and segmented using Blender
- Built with the powerful Three.js ecosystem
- Inspired by the need for better fitness education tools
If you encounter any issues or have questions, please open an issue on GitHub.
Made with ❤️ for the fitness and education community