Virtual reality on the web without specialized tools or complex setup — that was the promise I wanted to share at Pereira Tech Talks. A-Frame is a framework that lets you create 3D and VR experiences using just HTML and JavaScript, with no build step. If you know HTML, you can build VR.
Why the Web for VR
I started by talking about hardware. High-end headsets — HTC Vive, Oculus Rift, Sony VR — cost hundreds of dollars. But the barrier to entry drops a lot with options like Cardboard (around $7) or VR Box (around $15). The web is the most important mass-distribution platform: you don’t need to install anything, just a browser.
WebVR is the standard that defines the APIs a browser must expose for developers to create virtual reality experiences. Most WebVR experiences weigh less than 2 MB. And if you already know WebGL or Three.js, adding a bit of code gives you WebVR.
A-Frame: VR with HTML
A-Frame is an open-source framework by Mozilla built on Three.js. You don’t have to deal with WebGL directly. It uses an Entity-Component System architecture:
- Entities — Container objects that components can be attached to. They’re the base of everything in the scene.
- Components — Reusable modules that give entities appearance, behavior, or functionality.
- Systems — Provide global scope, management, and services for classes of components.
A-Frame’s web inspector feels like working with Unity — you can inspect and modify the scene in real time.
What I Showed in the Talk
I ran several live demos, from the basics to more elaborate projects:
- Primitives — Cubes, spheres, cylinders with HTML (CodePen demo)
- Sky and equirectangular images — 360° scenes with photos
- Textures and animations — Attributes, stats, camera animation
- 3D models — Collada, SketchUp 3D Warehouse, Blender
- Video and audio — Multimedia content in VR
- Cursor events — Interaction with the pointer
- Physics — With Cannon.js
- Collisions and mazes — Projects like webvr-maze
- Speech recognition — Voice commands in VR
I also showed inspiration projects: Mozilla’s A-Painter, A-Frame City Builder, and the React integration.
Resources
- View slides
- A-Frame docs
- A-Frame Registry — Community components
- CodePen demos: Primitives, Sky and inspector, Textures, 3D models, Physics, Maze
- Pereira Tech Talks blog post — event recap
The web continues to be the most accessible platform for experimenting with new technologies. WebVR opened doors that are still worth exploring — even as the standard evolves into WebXR, the core idea remains: making immersive experiences universally accessible.
Let’s keep building.