A collection of awesome resources for the A-Frame WebVR framework.

This list is synced now and then. For some of the more recent stuff, check out the recent A Week of A-Frame roundups on the A-Frame blog.

• Official Resources
• Community
• Learning
• Components
• Integration
• Scenes
• Tools

Straight from the horse's mouth.

• Official Site
• Documentation and Guides
• Blog
• Examples
• Inspector
• Registry
• Presentation Kit
• School
• Command Line Interface
• Twitter

Scenes built by the A-Frame team.

• A-Painter
• A-Blast

Community

Learn about A-Frame.

• aframe.io
• Wikipedia — A-Frame
• Wikipedia — Entity-Component-System

• Minecraft in WebVR with HTML Using A-Frame - Tutorial on creating a Minecraft-like scene in WebVR
• First Steps in VR - Building a maze game in VR
• Getting Started With A-Frame - Building the Olympic rings using A-Frame
• Relative Positioning in A-Frame - How to use <a-entity> as a wrapper to create local coordinate spaces
• Building a Simple Web VR UI with A-Frame - Building a set-sky component that changes the background when an entity is clicked
• Hands-on With Virtual Reality Using A-Frame, React, and Redux
• A-Frame: The Easiest Way to Bring VR to the Web Today

• Why iStaging Chose A-Frame - Building a large-scale real estate tour application
• Building Ghost Train Builder - Building a Halloween ghost train builder application
• Building Cardboard Dungeon with A-Frame - A case study on building a simple dungeon game using A-Frame
• Head Tracked Transformations - How to look behind an object in VR if you can't walk around it
• The Bow & Arrow is Virtual Reality's "Hello, World" - Building a bow and arrow for tracked controllers

Videos and podcasts.

• A-Frame Tutorials — Sonar Systems - A-Frame video tutorial series on YouTube
• A-Frame Tutorials — Alexandra Etienne - A-Frame video tutorial series on YouTube
• Using d3.js with A-Frame - Introduction to data visualizations in A-Frame with d3.js
• Building an A-Frame Vive App from Scratch - In Neocities

• A-Frame — Kevin Ngo - 5-minute A-Frame talk at the W3C Workshop on Web & Virtual Reality [Slides]
• Getting Started with Virtual Reality on the Web — Ada Rose Edwards - Talk at London Web Perf 2017 with a live multiuser demo
• How to Build Pokemon Go in 100% JS — Jess Telford - Talk at JSConf AU 2016 [Slides]
• A-Frame: VR for Developers — Diego Marcos & Kevin Ngo - Talk on A-Frame at the SFHTML5 "WebVR Ecosystem and API Update" meetup [Slides]
• Building Virtual Reality on the Web — Kevin Ngo - Talk on A-Frame at NingJS 2016 [Slides]
• Enter the Matrix, Exploring Your Kubernetes Cluster in Virtual Reality - Talk on building a room-scale Kubernetes browser in the HTC Vive at KubeCon 2016

• WebVR — Josh Carpenter and Kevin Ngo - Podcast with Shop Talk Show
• Enabling the Open Metaverse with WebVR, A-Frame, and Servo — Diego Marcos & Chris Van - Podcast with Voices of VR

Community components. To create and share a component, see angle's initcomponent tool. For curated components, see the A-Frame Registry.

• Along Path - Interpolating an entity's position along a path
• Always Fullscreen - Provide ways to enable Fullscreen on iOS (Scroll to Minimal-UI) and Android/Desktop (Fullscreen API)
• Ammo Physics Component - Library integrating three.js and ammo.js to enable physics in objects
• Animation - New and improved animation system using components. [Code]
• Asset Lazy Load - Assign asset loading order and delays
• Asset On-Demand - Load Assets dynamically when needed (and properly clean them up if not)
• Audio Visualizer - Audio visualizations using WebAudio API
• Broadcast - Multiuser with WebSockets
• ChartBuilder - Use ChartBuilder charts
• Checkpoint Controls - Eased linear locomotion between designated hotspots
• Collider, Explode, Spawner - Collection of components for collision, geometry explosions, and entity spawning
• Crawling Cursor - Cursor projected onto surfaces
• Crease - Creased shading
• Chromakey Material - Chromakey material for green screen effects
• Cubemap - Create a skybox from a cubemap
• Daydream Controller - Daydream controls
• Drag Look - Look controls in the opposite direction with changing cursor style
• Draw - HTML5 <canvas> as a material texture, with support for extension components
• Entity Generator - Generate entities
• Event Set - Set properties in response to events, replacement for declarative events
• Extras - Don's collection of A-Frame components
• Extrude and Lathe - Extrude and lathe geometries
• Faceset - Geometry from vertices and faces
• Fence - Set boundaries on entity position
• Firebase - Multiuser with Firebase
• Fit Texture - Automatically scale entities relative to their texture, so you don't need to set width/height manually
• Force-directed Graph - Represent a graph data structure in a 3D force-directed iterative layout, using d3-force-3d for the physics simulation engine.
• FPS Look - Facilitates controlling entity rotation directly with captured mouse
• Gamepad Controls - Gamepad controls using HTML5 Gamepad API
• GIF - Display GIF as a texture by using a Canvas
• Google Blocks - Display content from Google Blocks
• Gradient Sky - Use two colors to create a gradient shader for colorful skies
• Grid Helper - Create customizable grids
• Heatmap3d - Yet another heatmap/heightmap component
• Height Grid - Terrain
• Hexmap - A hex grid/map for data viz (inspired by deck.gl's hexmap layer)
• href - Link to other pages using cursor component
• HTML Texture - Using HTML as a texture, powered by html2canvas
• Interpolation - Interpolate positional and rotational updates for entities, useful for fetching from server for multiplayer
• k-frame - Kevin's collection of A-Frame components
• Keyboard - Full VR keyboard for use with WebVR controllers
• L-System - Render Lindenmayer systems
• Layout - 3D layout of child entities
• Leap Hands - Leap Motion controller support
• Lens Flare - Lens flare
• Look-At and Billboard - Component to tell an entity to face another entity, or to face the camera
• Mario Star Texture - Texture that cycles colors like stars in Mario using canvas
• Mesh Line - Draw thick lines
• Minecraft Avatar Components - Allows the creation, control, and custom skins on Minecraft-like characters
• Motion Capture - Record and replay headset and controller pose and events
• Mouse Cursor Component - Add interaction to the hardware mouse, by raycasting from XY position on canvas
• Multitouch-look-controls - Touch-driven freelook camera; drop-in replacement for look-controls
• No-click Look Controls - Intuitive desktop view controls without requiring mouse click + drag
• Ocean - Flat-shaded ocean primitive and component, with animated waves
• Orbit Controls - Orbit camera around an entity
• Orbit Controls Component - Allow desktop users to rotate the camera around an object
• Particle System - Particle systems (e.g., rain, dust, snow, fire)
• Passthrough - Show a video feed from the device's camera
• Persist Component - Use localStorage to make data persist over experiences
• Physics + Vive Controls - grab and sphere-collider components for combining the HTC Vive's controllers with the aframe-physics-system component
• Physics - Rigid-body physics using Cannon.js
• Pipe - A pipe with inner and outer radii
• Plot - Render 3D plots using mathematical functions or data.
• PLY Loader - Model loader for .PLY models, wrapping THREE.PLYLoader
• Polygon - n-sided polygons
• Proxy Controls - Connect input devices from your desktop to your mobile phone with WebRTC data channels
• Randomizer - Set random values
• Scatterplot - Scatterplot data visualization
• Selectable by @scenevr - Click on an entity to select it (handy for editors)
• Shake-to-Show - Using shake.js to toggle UI
• Slice9 - 9-Slice for creating sharp panels and tooltips for UI
• Sprite - Creates bitmap images that always face the camera
• Star - 2D stars
• Stereo - Enable rendering different entities for each eye, using three.js layers so you can render 3D stereoscopic videos (full and half-dome)
• Stereo Cube - Use stereoscopic cube-map textures (i.e., left and right eye textures)
• SVG File - Load basic SVG files as 3d geometry
• Teleport Controls - Teleportation with tracked controllers
• Template - Integration with Handlebars, Jade, mustache, Nunjucks JS template engines
• Terrain Model - Generating terrains using TerrainLoader
• Text Wrap - Wrapping text dynamically rendered onto the draw component
• Text Geometry - Polygonal text
• THREE Loader - Model loader for .json models, wrapping THREE.JSONLoader and THREE.ObjectLoader
• Trigger Box - A component that emits an event when it enters or leaves a predefined area
• Tube - Cylindrical primitive that shapes itself to a given path
• UI Components - A collection of components related to UI
• UI Modal - Show dialog box or a menu in front of the camera
• UI Widgets - Another set of UI components, including buttons, switchs, sliders, and knobs
• Universal Controls - Refactored A-Frame controls that supports gamepad, HMD, keyboard, mouse + pointerlock, touch-to-move, with physics compatibility
• Video Controls - Video controls (play/pause/jump) for A-Frame video assets
• Vive Cursor - A cursor for the HTC Vive's controllers
• WebVR Controller - HTC Vive controllers
• WebVR-UI - "Enter VR" Button by Google VR [Code]

• Draw - Render from canvas
• HTML - Render from HTML
• Video - iOS-compatible video material
• GIF - Render animated GIFs

Integration with existing tools, frameworks, and libraries.

• aframe-react - Thin and performant React layer on top of A-Frame
• D3.js - A-Frame data visualizations with D3.js
• Vue.js + TweenMax demo - Example of A-Frame with Vue.js for reactive components
• aframe-templating-examples - A-Frame with templating engines such as Handlebars, mustache, Nunjucks
• SpineFrame - Component for 2D sprite animation with Spine
• Meteor - A-Frame with Meteor, a JavaScript app framework
• Altspace - Integration with AltspaceVR
• Drupal - Drupal module for integration with A-Frame
• Mixin Style Sheets - CSS-like stylesheets for A-Frame for declaring mixins [Code]
• aframe-d3-3d-graph-example - An example of a 3D weighted graph using D3 and Aframe.
• aframe-d3-3d-bars-example - An example of a 3D bar chart using D3 and Aframe.
• aframe-phantomjs-continuous-streaming - Browse the web in VR by live streaming a web page into A-Frame using PhantomJS and ffmpeg
• aframe-keyboard - A virtual-reality keyboard and text editor in A-Frame
• Virtual World Framework - A-Frame with Virtual World Framework, a JavaScript app framework for building collaborative, immersive applications with live coding support
• aframe-next-static - This boilerplate leverages extremely simple deployment flow from Zeit's Now, now available for WebVR with A-Frame and React

• a-invaders - Space invaders game. [Code]
• DrawVR - DrawVR's portal leading to many A-Frame experiences including stores, games, rides, theaters, and scenes
• Cardboard Dungeon - A first-person dungeon crawler designed for mobile. [Code]
• Don McCurdy's Sandbox - Don McCurdy's A-Frame scenes including MagicaVoxel models, physics playgrounds, and controls [Code]
• Kevin Ngo's Scenes - Kevin Ngo's A-Frame scenes including MagicaVoxel models, audio visualizations, and a Minecraft demo [Code]
• Aztec Pong - Play Pong floating atop an Aztec monument. [Code]
• Hello, Pizza! - If a pizza spins in a forest and no one is around to eat it, does it make a sound? [Code]
• Alien Abduction - Alien Abduction demo
• Mars: An Interactive Journey - Explore Mars in virtual reality. Published by the Washington Post and created by a group at University of Texas at Austin. Read their thoughts on A-Frame and WebVR
• 360 Syria - View the devastation of barrel bombs in Aleppo, Syria; created in partnership with AllJunior and Amnesty International UK
• Tron World - Carpet Ride
• SkyIslands VR - Strange virtual landscapes
• Island - Voxel-based island in the ocean
• Tiny Hands for Trump - Donald Trump parody
• Sketch VR - Doodle on paper, take a picture, and view it in VR. [Code]
• EVA - Prototype mecha in lava
• Space Shark Room - Hinduist shark cage in space
• Metal Gear REX - Return to Shadow Moses… SNAKE!
• Vapor Wave - Trippy purgatory room
• Jump Island - Can you make it to the top?
• Roof Escape - Parkour!
• TumbVR - VR gallery for Tumblr
• VR Wiki Museum - Full Wikipedia in VR
• Where is Piers Morgan Disliked the Most? - Data visualization with D3
• Missed Connections - Visualization of Craigslist "Missed Connections" section
• Aeon - Aeon is a 3D environment with VR support, where the user runs an island that tells about the prequel to the main story of Aeon
• SlideAmaze - Turns your slideshow presentation into a 3D maze
• Outside Lands VR - VR preview of the San Francisco Outside Lands music festival
• Multiplayer Tic-tac-toe - Prototype of networked Vives playing Tic-tac-toe. [Video
• 30 Days of WebVR - One order of A-Frame and WebVR per day, all on CodePen
• Dominoes - Demonstration for the HTC Vive with physics using dominoes. [Code], [Video]
• Ball Throw - Throw balls at blocks using Vive controllers and Don McCurdy's physics. [Code]
• Lyrics VR - Watch lyrics fly past you in time with the music. [Code]
• Rubik's Cube - Spinning Rubik's Cube featuring a multicolored-cube component. [Code]
• Shopify - City Shoes - Shop in VR! Pick up some trainers and see if they match your swagger
• Vrogger - Frogger in VR. Hop and get across the road!
• Design Portfolio - About pages in 3D space with neat transitions
• Stand at the Edge of Geologic Time - A virtual-reality tour from NPR of Rocky Mountain National Park. [Code]
• Earth Rover - Controlling a physical robot from outer space using the Intel Edison and Leap Motion
• Imagined Reality - Stereoscopic cubemaps, taken from winners of OTOY’s Render the Metaverse contest
• Star Crossed - Piano and stars
• Procedural Forest - A procedural forest with procedural trees using the L-System Component
• iStaging LiveTour - 360° real estate tours with a neat mini-map
• Choose Your Own VR - Which cup will you choose?
• Cat Garden - Float through a space of cats and balloons
• Virtual Symphony - Experience music in a new way on this symphonic trip through Martin Garrix and Third Party - Lions in the Wild
• Brexit in Berlin - Listen to Europeans talk and react to Brexit
• Virtual Symphony II - Fly through particles, eagles, and horses while listening to Chainsmokers - Inside Out (Remix)
• VRVisitors - Multi-user gallery of photogrammetric museum artifacts
• Head-Tracked Transformations - VR UX prototype of transforming objects’ orientations with your head to enhance VR experiences that don’t have positional tracking. Read the instructions listed at #6. [Code]
• Weather Room - What’s the forecast for WebVR? Sunny with no chance of rain. [Code]
• CinemVR Design Prototype - Design prototype of a VR cinema
• JM Visual Creativity - Web designer and motion-graphics artist Jose Manuel Serna’s portfolio
• WebVR Forest - At A-Frame National Park
• Breathing Scape - A tree-adorned hill that slowly breathes
• A-Runner - Infinite runner game with cubes
• Zenspot - Relaxing nature experiences with soothing music
• Force Push - Become a block bender
• Low Nausea FPS Locomotion - Locomotion prototype for using 6DoF controllers (e.g., HTC Vive's) to grab and swing through scenes
• WebVR Soccer Stadium Complex - Watch several video feeds at once in a soccer stadium. [Code]
• Trident - Code experiment with cursor events in d3.js
• VR Inception School - Learn a bit about WebVR in WebVR
• GuriVR - Create sharable VR scenes using natural language and zero code. [Code]
• VR Space Builder - Simple VR builder for kids using a form to import models and images
• WebVR API Simulation Extension - Run WebVR 1.0 content without a supported headset or even a compatible browser/platform. Great for development
• WebVR Solar System - Solar System using A-Frame
• Track - Zooming on the track with the ocean water reflecting the sunset sky. [Code]
• AaMAZE Music Festival - Fully responsive official VR website for the AaMAZE music festival in Denmark
• Heart - An educating and interactive tour of the heart. But a life is at stake
• Miradas 360 - 360° experiences created by media-production teams. [Code]
• Interactive 360° Videos - Upload and edit 360°-interactive videos by overlaying DOM elements
• Unity Exporter to A-Frame - Export Unity scenes to three.js or A-Frame with lightmapping
• WordPress Template - WordPress template that displays the four most recent posts in VR
• Web Speech API Test - A demo of the Speech Recognition API to change object colors
• Apollo 11 Scan - View the inside of the Apollo 11 Command Module, thanks to the National Air and Space Museum
• Covo - Architectural visualization with baked global illumination
• TrippyVR.Tech - A showcase of various trippy VR experiences
• Asteroids - FPS of Asteroids made with A-Frame and React
• ScreenVR - Use your desktop in the Web in VR
• Let It Snow - Snowflake maker
• City Builder - Room-scale city builder. [Code]
• Low-Poly Forest Scene - Scene with snow and low-poly forest
• Tarski's Truth Machine - Tarski's Truth Machine for the HTC Vive
• Tattoo Simulator - NSFW (Nudity) Place tattoos on a human model
• Aincraft - Room-scale Minecraft demo with tracked controllers
• Band Explorer VR - Spotify browser
• The Hall - Museum that works across all VR devices
• CityViewR - Open data for smart cities
• MathworldVR - Room-scale 3D graphing calculator
• Dashboard VR - Displays real-time local information to the user such as weather, stocks, and news headlines
• 2017 - Holiday snow globe in New York City
• Temples of Cambodia - Tour of the most popular temples of Cambodia, from Al Jazeera
• React Imago3D - Make WebVR easily creating your own scene with built-in 3d object and use your browser or vr headset to see what you built in real time.

Tools built with or for A-Frame.

• WebVR Studio
• Fader Editor
• IdeaSpace VR
• Hologram

Contributions and suggestions are very welcome. Check out the guidelines and make a pull request.