Climb5

• 

• 

  Photo of 3D UI

Inspiration

The inspiration for Climb 5 came from our passion for climbing and the desire to make climbing routes more accessible and interactive for everyone. We wanted to create a tool that could help climbers visualize and plan climbs tailored to their abilites in an engaging 3D environment, making it easier to strategize movements and learn new techniques, with applications to outdoor climbing.

What it does

Climb 5 is an interactive climbing route planner that allows users to create, visualize, and simulate climbing routes on a 3D wall model. Users can place holds, define their types (Jug, Crimp, Nub), and connect them to visualize possible climbing paths, aswell as inputting their height to the application. Based on this information, Climb 5 will calculate all possible routes that the climber is able to geometrically accomplish, and selects the safest and most physically-stable solution. The app also features an animation to simulate different limb movements along the routes, helping climbers further understand the best sequence for each route.

How we built it

We built Climb 5 using React for the frontend and Three.js with @react-three/fiber for rendering the 3D climbing wall and holds. The backend was created with Python and interpreted using Flask, which handles all geometric verifcations and calculations for climbing routes within the climbing algorithm. We also integrated MUI for styling and used the GLTFLoader from Three.js to handle 3D models. The frontend and backend communicate via REST APIs to calculate routes and analyze movement possibilities.

Challenges we ran into

We faced several challenges while building Climb 5. The main difficulties were with accurately implementing geometry verfication, building an effective climbing algorithm, and integrating the frontend interactions with backend logic. It was tricky to distinguish possible and realistic limb movements and ensure that the center of mass remained within a stable range throughout the climb. We also encountered issues with the precision required for the animations and making sure holds could be accurately selected and manipulated in 3D space.

Accomplishments that we're proud of

We are proud of how functional the application is and how clean the frontend looks. The smooth integration between the interactive 3D model and backend logic was a significant accomplishment. The geometrical prediction algorithm and the stability confirmation is also something we are especially proud of as it allows younger users a simple entryway into climbing that they might not otherwise have from just looking at taller or more developped climbers. We’re especially pleased with the animation feature that shows the climbing path in real-time, allowing users to visualize limb movements dynamically. This required considerable effort to ensure realistic movements and proper sequencing of actions, and we're happy with how it turned out.

What we learned

Through this project, we learned a lot about React, Three.js, and graph theory. We became much more comfortable with handling complex 3D interactions using @react-three/fiber and learned to integrate backend logic effectively to perform real-time calculations for the climbing route. We also gained insights into geometry handling and applying graph theory concepts to real-life scenarios, which was both challenging and rewarding.

What's next for Climb 5

With more time, we would like to implement a more modular hold system that give us room for a more nuanced pathing algorithm, such as hold size, hold type, and hold orientation. In addition to this, we would have liked to cloud host this for users to use on their smartphones, further increasing the ease of access for new climbers! Otherwise, we are incredibly proud of product. Everything is next for Climb 5.

Built With

• flask
• python
• react
• typescript