WebVR Room Project


This project was developed to motivate undergraduate freshman students to develop their own first WebVR App using Javascript library A-Frame and web-based editing tool Glitch.

The project builds a single WebVR App that is developed in independent phases. First, students work with objects and positions in the scene. Second, students work with the color, lights and interactivity. Finally, students need to creat an WebVR room to integrate all the above elements and view it on their smart phone, mobile devices, and laptop using a web broswer–Firefox is recommended. Example code is provided for the instructors.

Students don’t need to write all the code for developing the WebVR App, but students need to learn how to work with a web based tool called Glitch. The instructor can decide which part the students need to work on. For students who are intimidated by pogramming, this project allows them to explore, build, and share a WebVR App easily.

Getting Started

Let’s see a demo of the finised App! If you like it, you can share it with your students just by giving them this link and ask them to “Remix This”.


You can use this assignments in the introductory course for undergraduate freshmen students.

Instructor Guide

We distribute the project Glitch link to students, which allows them to work on their own. We also use this project regularly in large courses, so students can collaborate on the project if they want. We also used it at workshop for other students who are not in Interactive Media program. We recommend that you assign this project as an instructional component of your course, rather than an assessment. Give students points for completing the assignment correctly, but expect that most students will receive all the points.


Summary Students develop a WebVR App using using A-Frame and Glitch.
Topics WebVR, JavaScript, HTML, CSS.
Audience Appropriate for students (e.g. undergraduate freshman, high school students, etc.) who are new to programing.
Difficulty Easy
  • The project introduces advanced ideas that students do not typically have pre-knowledge on WebVR or programming. This allows them to build an application that is interesting and motivate them to learn more in the CS field.
  • Students like the real-world application of building their own bedroom, classroom, etc.
  • Students can share their project online with their family and friends.
  • It is difficult to explain the mechanics behind A-Frame.
Variants Here a list of possible assignments you can ask student to expand on based on this project.

  • Build your bedroom using A-Frame and Glitch
  • Build your classroom usign A-Frame and Glitch
  • Creat a snowman in the field with snowflakes



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s