gitmyhub

aframe

JavaScript ★ 18k updated 5d ago

:a: Web framework for building virtual reality experiences.

A-Frame is a web framework that lets you build browser-based 3D, VR, and AR experiences using HTML-like tags, no game engine required, works on desktop, smartphones, and VR headsets.

JavaScriptthree.jsWebXRnpmsetup: easycomplexity 2/5

A-Frame is a web framework for building browser-based 3D, augmented reality (AR), and virtual reality (VR) experiences. The idea behind it is that you should not need to learn a heavy game engine just to put a 3D scene on the web — you should be able to write something close to plain HTML and have it work, including on a VR headset.

A-Frame does this by adding a set of custom HTML tags. You wrap your scene in an element, then drop in shapes like , , or with attributes for position, rotation, and color. Open the page in any WebXR-capable browser and the scene renders in 3D; on a connected headset it appears as a real VR experience. Underneath, A-Frame is a thin layer on top of three.js (a popular JavaScript 3D library) and the browser's WebXR support, and it uses an entity-component architecture, a game-engine pattern where you compose objects out of reusable behaviors. You can stay in HTML or drop down to JavaScript and three.js for more control. A built-in visual inspector lets you poke around your scene the way browser dev tools let you inspect a web page. Built-in components cover geometries, materials, lights, animations, models, raycasters, shadows, positional audio, and tracked controllers; community components add particle systems, physics, multiuser, oceans, speech recognition, and teleportation.

You would use A-Frame if you wanted to publish a VR or AR experience on the web without building everything from scratch. It runs on desktop and smartphones too, so users without a headset can still open the page.

The framework is written in JavaScript and distributed on npm. The full README is longer than what was provided.

Where it fits