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.
Straight from the horse's mouth.
- Official Site
- Documentation and Guides
- Blog
- Examples
- Inspector
- Registry
- Presentation Kit
- School
- Command Line Interface
Scenes built by the A-Frame team.
Learn about A-Frame.
- 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-skycomponent 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
- 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
XYposition 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 -
grabandsphere-collidercomponents for combining the HTC Vive's controllers with theaframe-physics-systemcomponent - 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
.PLYmodels, wrappingTHREE.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
drawcomponent - Text Geometry - Polygonal text
- THREE Loader - Model loader for
.jsonmodels, 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
- 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.
Contributions and suggestions are very welcome. Check out the guidelines and make a pull request.
