Inspiration

We wanted to create something for young kids in the covid era who have never gone to a classroom. We wanted them to be able to experience what a real classroom feels like, so that their experiences are normalized when we transition back to physical classes.

What it does

It is a web-based 3D app that simulates a classroom, where you can walk around, interact with other people, take notes etc. The students will be represented by graphically designed characters with their webcam videos for faces.

How we built it

We build it using pure HTML, CSS and JavaScript.

Challenges we ran into

We initially tried using javaScript libraries like three.js for the 3D environment. However, the logistical complexities led us to decide to create the app using no external libraries or frameworks.

Accomplishments that we're proud of

Being able to simulate a 3D environment using nothing but CSS and JavaScript. Being able to make it responsive for different screen sizes.

What we learned

Setting up a git repo correctly is essential before starting any project. VSCode LiveShare is a good tool - not only for collaborative coding, but also for viewing the website on a local server, so you don't get CORS issues.

What's next for On-Academy

An integration with video conferencing apps like zoom. Be able to restrict movement of students during lectures. Be able to doodle on notes. Give students the option to customize their character Functional mini-games in the classrooms like checkers, cards etc. for game days

Built With

Share this project:

Updates