I and many other students have had complaints about remote learning. School isn't the same without being inside of a classroom; Zoom classes and Google Classroom don't provide the same experience as the physical classroom does. For months, I have thought about how this issue could be solved, and concluded that simulating a classroom with augmented reality would be an excellent choice.

What it does

With ScholAR, students log in using the ScholAR web app. They can then navigate to their classes (which appear in 3D space) and select any one they want. Students will see the outside of their classroom, which includes the class agenda for the day and their assignments, all of which appear right in front of them for easy access. If a class is in session, a student will be able to enter the classroom, where they will be fully immersed into the lesson.

How I built it

I used ReactJS to build the web app and ThreeJS to build the AR scenes.

Challenges I ran into

  • At first, it was difficult to understand how to build 3D scenes, so I had to do a lot of research to understand the basics.
  • Before deciding on ThreeJS, I tried several other libraries that failed to work, and that took a lot of time.
  • I originally planned on using VR instead of AR, but I faced many struggles trying to get it to work on iOS

Accomplishments that I'm proud of

I built this project faster than I have built others in the past, and when I step back, I realize how cool the final result is.

What I learned

Before building ScholAR, I had no idea how 3D rendering or WebXR worked, but now I have a much better understanding. I also learned how to focus nearly 100% of my attention towards getting a project such as this one done.

What's next for ScholAR

To improve on ScholAR, I will likely make a VR version since that will increase how immersed users are. I also would like to use a tool like WebRTC to allow for more live features.

Built With

Share this project: