Anatomy 3D Game

Anatomy 3D Game

logo.jpeg

Introduction

Welcome to the world of Anatomy 3D — an innovative 3D game development project that promises to revolutionize the way we learn about the human body. Our team is driving this immersive gaming experience, which isn’t just about entertainment — it’s also about learning and engagement.

Our primary goal with Anatomy 3D is to create an interactive platform that captivates users while imparting essential knowledge about various organs and bones within the human body. Recognizing the challenge of sustaining young learners’ interest, especially in educational settings, we have created a game that strikes the perfect balance between entertainment and learning.

Designed for children aged 9–13, Anatomy 3D offers a fun and accessible way of comprehending complex anatomical concepts. Through gamified challenges and interactive features, participants are not only encouraged to refine their precision and time management skills but also deepen their understanding of human anatomy. By correctly placing organs and bones within a virtual model, players earn points and gain additional points for every remaining second, incentivizing them to finish the game quickly. Moreover, the game’s ability to allow users to zoom in and out of the virtual model provides a level of immersion and understanding unmatched by static illustrations.

At its core, Anatomy 3D aspires to make learning enjoyable, intuitive, and comprehensible for school and high school students alike. By harnessing the power of gaming, we aim to offer a valuable educational tool. Join us as we outline our project journey to creating Anatomy 3D.

Method

Our software application consists out of three main components: Frontend, backend, and MongoDB database. The general architecture of the application is depicted in the figure below. The frontend is a React application which communicates with the backend via HTTP requests. We use the axios library to execute HTTP requests from the frontend. The backend is an express.js server that exposes a REST API. In short, a REST API is a web-based Application Programming Interface (API) that uses a REpresentational State Transfer (REST) protocol. Some of the endpoints of our REST API are public and others are protected endpoints — protected endpoints require authentication to gain access. The backend can read and write from the MongoDB database using the mongoose library. We decided to run our MongoDB instance as a docker image with the help of docker-compose for ease of handling and resetting .Therefore, we did not need to install mongodb locally.

Frontend

Here is an overview of the libraries utilized to develop the frontend components of the game:

• React React served as the foundational library for building the frontend of our 3D anatomy game. With React, we could smoothly integrate other libraries and manage state effectively, enhancing the overall user experience.
• React-Three/Fiber and Three The combination of React-Three/Fiber and Three.js allowed us to render 3D models within our application. With functionalities such as useFrame and Canvas, we could create dynamic scenes and animations, providing users with an engaging learning experience.
• React-Three/Drei React-Three/Drei offered a set of handy utilities and components that accelerated our development process. Features like Grid, OrbitControls, useGLTF, and PivotControls enabled us to implement essential functionalities like camera control, loading 3D models, and adding interactive elements with ease.
• Axios For communication with the backend server, we relied on axios. This HTTP client enabled us to make asynchronous requests to the backend, reading and writing necessary data such as user credentials and game scores.
• Material-React-Table Material-React-Table was used to present game statistics and scores to the players. Its intuitive table layout and customization options allowed us to display leaderboard data in a clear and visually appealing manner.
• React-Confetti To celebrate victory moments and add a touch of delight to the gaming experience, we integrated React-Confetti. This library facilitated the creation of confetti animations upon winning, providing users with a gratifying visual feedback that amplified their sense of achievement.

Backend

Outlined here are the libraries utilized in constructing the backend server for the game:

• Express.js Express.js formed the backbone of our backend infrastructure, providing a robust framework for building a RESTful API and handling HTTP requests/responses efficiently. Its minimalist design and extensive middleware support allowed us to create a scalable and maintainable backend architecture.
• Mongoose Mongoose served as the bridge between our express.js application and MongoDB database. By leveraging Mongoose, we could easily communicate with the database, define schemas, and perform CRUD operations on our data models. Its intuitive schema-based modeling and validation capabilities streamlined the development process and ensured data consistency throughout the application.

Results

In developing this application, we pushed our limits and met our project goals. Through teamwork and creative problem-solving, we have created an engaging 3D anatomy game that is both educational and fun for users.The following sections first detail the final state of the project and then we discuss some of the challenges that we faced during implementation.

Outcome

Welcome to our 3D Anatomy Game! Let’s walk through how it all unfolds.

Upon arriving, you will find yourself on the homepage, offering a selection of buttons for navigation. Looking to learn more about the game? Click on About for a brief introduction. Curious about your standing among other players? Head to Scoreboard to view rankings.

Next up, Login allows returning players to sign in, while newcomers can easily register for an account. Once logged in, you’ll enter the Play area — your hub for adventure. Here, your scores are prominently displayed, motivating you as you go on challenges. Ready to dive into levels? Begin with Level 1, and upon successful completion, Level 2 awaits.

user_status_combined.PNG

For personalization options, navigate to Dashboard to update your profile. Additionally, explore our Encyclopedia for in-depth knowledge on various organs and bones encountered in the game.

Level 1 — the Organ Placement Challenge

In this level, the user will be tasked with arranging organs in their anatomically correct positions. Using the intuitive PivotControls, the user has the power to manipulate each organ in three dimensions. The goal is to carefully position each organ within the human body shape. As the player aligns an organ close enough to its target position, it will snap into place, locking its movement. Each correctly placed organ earns the user 25 points.

human_model.PNG

But wait, there’s a catch — the user is fighting against a ticking clock! They have a total of 150 seconds to complete level 1. If time runs out before all organs are correctly placed, they still earn points for the ones that are correctly placed. However, if the player completes the task within the time limit, they will earn an additional 10 points for every remaining second. Plus, a triumphant “You won” message, accompanied by a shower of confetti will be displayed. And here is a neat feature — the user can freely rotate, translate, and zoom in and out of the entire scene in 3D. This allows them to get a better view of the organ positions and ace the challenge with precision.

Organ_display.PNG

Level 2 — the Bone Placement Challenge

In this level, the user will be challenged to place different bones to the correct position all over the human body. Just like in Level 1, the player will use the Pivot Controls to maneuver each bone in three dimensions. The objective remains unchanged — to position each bone accurately within the human body structure. The clock is again ticking! This time 250 seconds are given to complete the task.

bones.PNG

Problems

Throughout the course of our project, we encountered several challenges that put our problem-solving skills to the test. Here are some of the major challenges we faced:

• Finding Suitable Free Open 3D Models: One of the primary challenges was sourcing high-quality, free, open models for the anatomical structures featured in our game. Making sure that these models accurately matched the shape of the human body posed an additional challenge and took several attempts at scaling and rotating them. Furthermore, we had to work on splitting large models, which encompassed multiple organs or bones, into separate models, each representing a single organ or a single bone.
• Debugging: Debugging proved to be a significant challenge on both the backend and frontend parts. In the backend application, identifying and resolving issues within our database interactions and API endpoints required thorough testing. Similarly, debugging the frontend React application, especially concerning react-three-fiber components and animations, posed its own set of challenges.
• Familiarizing Ourselves with 3D Libraries, Controls, and Camera Views: Integrating 3D functionality into our backend application required a learning curve as we familiarized ourselves with various 3D libraries, controls, and camera views. Adapting to the use of these tools and techniques was essential to building this applications.

Conclusion

Our goal was straightforward: create a game that blends entertainment with education. And we are proud to say we achieved it. We have crafted a platform that introduces young learners to the complexities of human anatomy in a way that sticks. By leveraging 3D technology and gamification, we have transformed intricate anatomical concepts into interactive challenges that foster learning through play.

From designing the frontend interface to architecting the backend infrastructure, every aspect of this project demanded precision and a willingness to push boundaries. Of course, it wasn’t all smooth sailing. We encountered our fair share of obstacles along the way — from sourcing suitable 3D models to debugging intricate code. But with each challenge came an opportunity for growth, pushing us to refine our skills and find innovative solutions.

As we reflect on our accomplishments, we are excited about the impact Anatomy 3D will have on educational practices. By making learning accessible, interactive, and engaging, we aim to inspire a new generation of learners to explore the intricacies of the human body.

Possible future work and improvements

Our application is a complete game, containing all the features we intended to include. Looking ahead, we envision possibilities for refining its performance and introducing innovative features beyond the existing framework. In particular, we are thinking about

• Enhancing our learning game involves refining the 3D models to accurately represent real-world objects and to enhance their visual appeal. This improvement can be achieved by either securing funds to obtain higher-quality models or by partnering with skilled 3D model designers. By investing in improved models, we aim to provide users with a more immersive and engaging experience, helping them better understand the concepts being taught within the game. Additionally, enhancing the aesthetics of the models can make the learning process more enjoyable and memorable for our audience, ultimately contributing to the effectiveness of the educational experience.
• Expanding our learning game involves introducing new game levels, possibly focusing on topics like the nervous system and muscles. By incorporating these additional levels, we aim to provide users with a deeper understanding of complex biological concepts in a fun and interactive way. These new levels could offer challenges and puzzles related to the functioning of the nervous system and the mechanics of muscles, allowing players to explore these topics in more detail while advancing through the game. Furthermore, by diversifying the content, we can cater to a wider range of learners and keep them engaged for longer periods, ultimately enhancing the educational value of the game.

Team members

• Rebeca Morales Masis
• Edilbert Christhuraj
• Mentor: Jose Rigel