Making WebVR storytelling easy and accessible for classroom use
For the past year, I’ve been working on an NSF-funded project focused on helping 5th grade students and educators create immersive, place-based stories about their countries’ food and culture in virtual reality. As part of that work, I developed a tool called the 360 Hotspot Creator with the help of developer and former graduate assistant Sagar Gada, along with support from the Cursor AI coding platform.
The tool was tested with students last summer, and over the past several months we’ve been improving it based on what we learned. We will soon be introducing the improved tool to a second set of students, all of whom will benefit from the feedback and testing from those who used it last year.
You can see a few examples of tours students built with this editing tool here:
- Agriquest Seeds of Story Tour #1
- Agriquest Seeds of Story Tour #2
- Video example of a finished 360 tour
And here’s a short YouTube walkthrough showing the editor in action:
Watch the 360 Hotspot Creator editor walkthrough
I’m also excited to share that the 360 Hotspot Creator is now available on Github as an open source project! More on that later.
What the 360 Editing Tool Does
The 360 Hotspot Creator lets students, teachers, and creators build interactive 360-degree virtual tours directly in a web browser. The target use is an iPad with a keyboard, but it of course can also be used on a laptop or desktop computer. Users can upload 360 photos or videos, add clickable hotspots, connect multiple scenes, include text, audio, images, videos, 3D models, and web links, and then export or submit their finished projects.
Why was something like this needed? Couldn’t we have just used something like Unity? The answer is simple: the students at the learning center where we tested this didn’t even have access to computers.
The only thing we were able to get them, thanks to our NSF grant, was older iPads with inexpensive keyboards. In addition, the 360 gear they used was loaned from the Newhouse School of Public Communications, where I work as a Professor of Practice and Endowed Chair in Journalism Innovation.
Designing a VR editing and viewing system with such extreme constraints required a completely different approach, as everything needed to be able to be done on nothing more than those iPads and an occasional professor’s laptop to configure certain things. At times, we also didn’t even have access to reliable Wifi. As a result, everything this tool does works in a Chrome web browser, and the files and choices made are saved in browser memory until the project is submitted.
This tool also incorporates learning workflow typical of a teacher-student setup. An admin backend includes features designed specifically for teachers to check students’ work, provide feedback and even fix problems in their projects. A robust admin portal allows management of student accounts, class rosters, project submissions, version history, teacher review tools, shared asset libraries, and options for hosting finished tours. It can be run locally, deployed online, and used in desktop browsers, mobile devices, or compatible VR headsets.
Finally, the export of the tool is a completely self-contained A-Frame web site that can be hosted anywhere. All exported files can be edited using a coding editor like Visual Studio Code, or even just given to AI to clean things up. So not only is this tool provided as open source, it uses the open-source A-Frame code and exports everything in open-source HTML, CSS and Javascript.
One thing I especially like about this project is that it is possible to run and launch it completely locally on your own computer. The README includes setup instructions for installing dependencies and starting a local server. If you have never done that kind of thing before, one approachable path is to download Cursor, give its AI assistant the link to the GitHub repository, and ask it to spin up a local server for you. You may need to set up accounts with services such as Backblaze and Render and create a few API keys for hosted storage or deployment. The project’s Render deployment guide walks through that process, and once those pieces are in place, much of the rest should be pretty automatic.
Easy Install, Thanks to AI
The project is available on GitHub here under the MIT License, so others are welcome to use, modify, and build on it.
My hope is that by releasing this tool as open source now, other educators, researchers, students, and community organizations can adapt it for their own projects, whether that means documenting local history, creating virtual field trips, building science communication experiences, or helping students tell stories about the places that matter to them.
So Many to Thank!
Special thanks to Syracuse University graduate Sagar Gada, who created the first version of this application as a graduate student assistant and later continued work on it as a part-time employee under the National Science Foundation grant for the Innovative Technology Experiences for Students and Teachers project.
I’m also grateful to Syracuse University School of Education Professor Silvie Huang, the project PI; co-PIs Professor Sharon Dotger, Professor Brice Nordquist, Professor Nicholas Bowman, and Professors Matthew Potteiger and Stewart Diemont; and to all of the faculty, students, community volunteers, and especially the youth participants whose early use and feedback helped shape the tool.
Finally, thanks to the patient college students who used versions of this tool over the last year in my Syracuse University Emerging Media Platforms class. Thank you for struggling along with me and also providing lots of feedback. I hope those of you who used it will check out the new version, as you may see some of your own ideas fully reflected in this latest version.