if you've ever tried to look up exercises for a specific muscle group, you've probably used a site like musclewiki. they are useful, but honestly, clicking on static 2d images is boring and feels like web design from 2010.
i wanted to build something that actually felt engaging. so i created muscl3, a fully interactive 3d web app where you can rotate a 3d model, click on specific muscle groups in 3d space, and pull up workouts dynamically from a backend database.
building a 3d web app is a completely different beast than standard frontend dev. i used react and typescript for the core structure, but the heavy lifting is done by three.js.
getting a 3d model to render on a webpage is easy. getting it to be interactive, handle raycasting (figuring out exactly which muscle the user clicked in 3d space), and perform smoothly on mobile devices was the real challenge. the result, though, is a completely immersive interface.
for the backend, i didn't want to deal with managing my own postgres instance, so i went with supabase.
i designed the sql tables to heavily normalize the relationship between muscle groups, exercises, and equipment. when you click a muscle on the 3d model, it triggers a supabase api call that instantly fetches the relevant workout data.
the whole thesis of this project was that 3d interaction is more engaging than 2d static images. i tracked the average session length of users testing the app compared to standard usage metrics of flat 2d fitness sites.
because users could physically interact with the model, rotate it, and explore, they spent significantly more time on the site. we saw a 25% boost in user engagement time simply by upgrading the UI paradigm.
here is the stack i used to bring the 3d experience to life.