Threecise

<!-- PROJECT LOGO --> <br /> <div align="center"> <h1 align="center">Threecise 🥂🤖✨</h1> <p align="center"> Want to learn some dance moves 💃 or some work outs 🏋️ ?? watching videos is good but the trouble begins when you start it hard to visualise 😵 thats where Threecise comes in... learn some dance moves and workouts by a bot 🤖 in 3D how cool that sounds right🤩 !! zoom in / out to properly focus 🧐 on a particular body movement of the excercise , rotate the bot for better visualization 👁️👄👁️ and much more..... on a single web app✨ <br /> <a href="https://github.com/Sourabh-Bharale/fitnessThreejs"><strong>Explore the docs »</strong></a> <br /> <br /> <a href="https://threecise.vercel.app">View Deployment </a> · <a href="https://github.com/Sourabh-Bharale/fitnessThreejs/issues">Report Bug</a> . <a href="https://github.com/Sourabh-Bharale/fitnessThreejs/issues">Request Feature</a> </p> <strong>Like the project ( UwU ) ?? we would appreciate if you give this repo a star⭐</strong> </div> <!-- TABLE OF CONTENTS --> <h2><strong><details> <summary>Table of Contents</summary> <ol> <li> <a href="#project-gallery">About The Project</a> <ul> <li><a href="#project-gallery">Project Gallery</a></li> <li><a href="#tech-stack">Tech Stack</a></li> </ul> </li> <li> <a href="#getting-started">Getting Started</a> <ul> <li><a href="#prerequisites">Prerequisites</a></li> <li><a href="#installation">Installation</a></li> </ul> </li> <li><a href="#resources-used-throughout-the-journey">Resources</a></li> <li><a href="#contributing">contributing</a></li> <li><a href="#creators">meet the creators</a></li> </ol> </details></strong></h2> <!-- ABOUT THE PROJECT -->

Project Gallery

---

<div align="center"> <img src = "./readme_assets/main.gif"> </div>

---

<table align="center"> <tr> <td><img width="400px" src = "./readme_assets/start.png"></td> <td><img width="400px" src = "./readme_assets/crunches.gif"></td> </tr> <tr> <td><img width="400px" src = "./readme_assets/gagnamStyle.png"></td> <td><img width="400px" src = "./readme_assets/categories.png"></td> </tr> <tr> <td><img width="400px" src = "./readme_assets/hiphop.gif"></td> <td><img width="400px" src = "./readme_assets/gagnamStyle.gif"></td> </tr> </table>

---

Tech stack

• <img src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white">
• <img src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white">
• <img src="https://img.shields.io/badge/threejs-black?style=for-the-badge&logo=three.js&logoColor=white">
• 

---

<!-- GETTING STARTED -->

Getting Started

Instructions on setting up your project locally. To get a local copy up and running follow these simple steps.

---

Prerequisites

list things you need to use the software and how to install them.

---

• npm

  npm install npm@latest -g
  

---

Installation

1. Clone the repo into your desired directory

   git clone https://github.com/Sourabh-Bharale/fitnessThreejs.git
   

2. Install dependencies (only the first time)

   npm i
   

3. Run the local server at localhost:3000

   npm run dev
   

   Now you are good to go 🚀

---

Build for production in the dist/ directory

npm run build

start your optimized build at localhost:3000

npm run start

<!-- USAGE EXAMPLES -->

Resources used throughout the journey

Implementing this project was not a peice of cake...😨...faced many difficulties also experienced lack of resources on the web to do the same 😖 creating modals🤖 was some what a easy task... finding animations was somewhat time consuming ⌛ but making the animations work on a single modal was a real problem + even more troublesome as 😢 and yet still here we are🥂🤩 below are some resources we found useful during our journey

---

<ul> <li><a href="https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene">React-three</a></li> <li><a href="https://docs.pmnd.rs/react-three-fiber/getting-started/introduction">React-three</a></li> <li><a href="https://www.blender.org/">blender</a></li> <li><a href="https://www.mixamo.com/#/">Animations</a></li> </ul>

For more examples, please refer to the threeJS

---

<!-- CONTRIBUTING -->

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

<!-- CONTACT -->

Creators

<div align="center"> <img src = "./readme_assets/creators.gif"> </div> <table> <tr> <td> <h1>Sourabh</h1> <ul> <li><a href="https://github.com/Sourabh-Bharale/"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white"></img></a></li> <li><a href="https://linkedin.com/in/sourabh-bharale-a9365821a/"><img src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white"></img></a></li> <li><a href="https://instagram.com/_s0ur48h_/"><img src="https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white"></img></a></li> </ul> </td> <td> <h1>Aryan</h1> <ul> <li><a href="https://aryanjangid.in"> <img src="https://img.shields.io/badge/website-000000?style=for-the-badge&logo=About.me&logoColor=white"></img></a></li> <li><a href="https://github.com/aryanjangid"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white"></img></a></li> <li><a href="https://www.linkedin.com/in/jangidaryan/"><img src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white"></img></a></li> <li><a href="https://www.instagram.com/aj_aryan0007/"><img src="https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white"></img></a></li> </ul> </td> </tr> </table>

<strong>Like the project ( UwU ) ?? we would appreciate if you give this repo a star⭐</strong>

<!-- MARKDOWN LINKS & IMAGES --> <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->