At the Innovation Center, we’re always looking for ways to make technology more approachable and accessible. For creating interactive 3D scenes, one of our favorite tools is A-Frame: a free and open-source web framework. A-Frame can be added to any basic webpage, giving you special HTML-like tags. These tags enable you to create a 3D scene by adding any number of 3D shapes or models, and set their position, size, orientation, and color. Navigation controls are automatically added to enable the viewer to naturally explore the scene. 

Since A-Frame runs in any web browser, you can view scenes on laptops, phones, or even VR headsets without having to install any extra software. Additionally, the navigation controls automatically adapt to whatever system you are using. On a laptop, you can use the arrow keys and mouse to move and look around the scene. On a phone, you can tilt or rotate your device and the view shifts automatically, letting you look around the virtual environment – this is called the “magic window” effect. In a VR headset, you can simply look around naturally and use the handheld controllers to float through the scene, making it feel fully immersive.

Developing scenes in A-Frame involves a blend of math (understanding x, y, z coordinates and rotations) and creative design, which aligns beautifully with the interdisciplinary mission of the Innovation Center. The potential applications span many disciplines as well. Whether someone is exploring 3D storytelling, data visualization, interactive art, modeling real-world objects, or entirely new forms of digital expression, A-Frame offers a flexible platform where ideas can take shape in just moments. We’ve even used this platform for some of our own research and development, such as our AR marker project described in a previous post, where users could point their phones at an AR marker and instantly see a digital object appear in 3D space.

We host example projects on our GitHub account for anyone to learn from, reflecting our commitment to open, accessible education.  We’re also contributing back to the A-Frame development ecosystem by creating plugins for other creators and programmers. These tools streamline common tasks such as loading 3D models, normalizing their dimensions so they display at intuitive sizes, and simplifying how preset materials can be modified. Sharing these open-source resources is another way we support innovation, both at Adelphi and throughout the wider XR development community.