awesome-aframe.md

awesome-aframe

A collection of awesome things regarding A-Frame , a framework for building virtual reality experiences on the Web.

Table of Contents

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

Official Resources

Straight from the horse's mouth.

• Blog
• Official Site
• Team Site
• Examples
• Codepen

Community

Find human beings using A-Frame.

• Slack
• Twitter
• IRC: irc://irc.mozilla.org:6697/#VR

Learning

Learn about A-Frame.

Articles

• A-Frame - Virtual Reality on the Web Simplified
• Hands-on With Virtual Reality Using A-Frame, React and Redux
• Schneller Einstieg in die WebVR Entwicklung mit A-Frame (German) - Translated
• WebVR mit A-Frame: Einführung & Grundlagen (German) - Translated
• Introduction to A-Frame - Slides from talk at Mozilla Taipei
• Build the Virtual Reality Web with A-Frame - Slides from talk at ForwardJS
• Build a Simple First-Person-Shooter Using Components - Mozilla Hacks post showing off an entity-component-system pattern workflow to build an interactive scene
• Relative Positioning in A-Frame - How to use as a wrapper to create local coordinate spaces
• Building Cardboard Dungeon with A-Frame - A case study on building a simple dungeon game usign A-Frame
• A-Frame: The Easiest Way to Bring VR to the Web Today - Getting started on WebVR with A-Frame
• A-Frame 0.2.0 - The Extensible VR Web - Release of A-Frame 0.2.0
• Building a Simple Web VR UI with A-Frame - Using cursor and components to swap photospheres
• Lightmapping on the Server - Server-side lightmapping with Blender
• Scene Export - Exporting A-Frame-based scenes in SceneVR
• Using Thingiverse Files in A-Frame
• Building 3D Games on the Web - Basics of building 3D games on the web
• Getting Started With A-Frame - Building the Olympic rings using A-Frame
• Head Tracked Transformations - How to look behind an object in VR if you can’t walk around it
• Porting a Water Shader to A-Frame for the Track Demo
• Interactive 360 Video: Accurate Positioning and Smooth Tracking - Interactive 360 videos by overlaying DOM elements and live editing 360 videos

Talks and Videos

• Building a Virtual Reality Web Experience - A sneak peek of A-Frame before it was released
• A Review of Mozilla's A-Frame WebVR Framework
• Responsive Web Design with A-Frame
• Using A-Frame with Epson Moverio and Crosswalk - Tech talk on building WebVR and VR apps with Crosswalk and A-Frame for the Epson Moverio augmented-reality smart glasses
• D3 + 3D: Using d3.js with A-Frame
• Build the Virtual Reality Web with A-Frame - Talk on A-Frame at ForwardJS
• VR on the Open Web with A-Frame and WebVR - Voices of VR podcast featuring Josh Carpenter
• A-Frame: VR for Developers - Talk on A-Frame at SFHTML5
• Introducing WebVR with A-Frame at RunJumpDev July 2016 Monthly Meeting - Talk on WebVR
• A-Frame: A Beginner Lesson - A-Frame for Beginners Slideshow
• WebVR: Virtual Reality on Web Pages - Presentation on WebVR and A-Frame
• A-Frame Presentation Kit - Official A-Frame Presentation Kit
• A-Frame WebVR Tutorial - A-Frame WebVR tutorial series

Entity-Component-System (ECS)

Learn about the entity-component-system pattern which A-Frame is based on.

• Entity Systems Wiki
• Wikipedia Entry
• How A-Frame is Different from Other 3D Markup Languages
• Das Objekt-Komponenten System von A-Frame verstehen (German) - Translated
• Eigene Komponenten für A-Frame programmieren (German) - Translated
• Kommunikation zwischen A-Frame und JavaScript (German) - Translated
• How to Write an A-Frame VR Component

Components

Third-party components (of the entity-component-system pattern). To create and share a new A-Frame VR component, see the Component Boilerplate .

• Along Path - Interpolating an entity's position along a path
• Asset Lazy Load - Assign asset loading order and delays ^{★ 3, pushed 228 days ago}
• Audio Visualizer - Audio visualizations using WebAudio API
• Bmfont - Renders bitmap/SDF fonts for high-quality 2D text
• Broadcast - Multiuser with WebSockets
• Checkpoint Controls - Eased linear locomotion between designated hotspots
• Collider, Explode, Spawner - Collection of components for collision, geometry explosions, and entity spawning
• Crease - Creased shading
• Cubemap - Create a skybox from a cubemap
• Drag Look - Look controls in the opposite direction with changing cursor style ^{★ 1, pushed 144 days ago}
• Draw - HTML5 as a material texture, with support for extension components ^{★ 17, pushed 168 days ago}
• 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 ^{★ 5, pushed 258 days ago}
• Faceset - Geometry from vertices and faces
• Fence - Set boundaries on entity position ^{★ 0, pushed 133 days ago}
• Firebase - Multiuser with Firebase
• Fit Texture - Automatically scale entities relative to their texture, so you don't need to set width/height manually ^{★ 0, pushed 127 days ago}
• FPS Look - Facilitates controlling entity rotation directly with captured mouse ^{★ 5, pushed 232 days ago}
• Gamepad Controls - Gamepad controls using HTML5 Gamepad API ^{★ 13, pushed 164 days ago}
• GIF - Display GIF as a texture by using a Canvas
• glTF - glTF models
• Grid Helper - Create customizable grids ^{★ 1, pushed 129 days ago}
• Height Grid - Terrain
• href - Link to other pages using cursor component
• HTML Texture - Using HTML as a texture, powered by html2canvas ^{★ 15, pushed 173 days ago}
• Interpolation - Interpolate positional and rotational updates for entities, useful for fetching from server for multiplayer ^{★ 4, pushed 148 days ago}
• k-frame - Kevin's collection of A-Frame components
• Keyboard - Full VR keyboard for use with WebVR controllers
• Layout - 3D layout of child entities ^{★ 10, pushed 135 days ago}
• Leap Hands - Leap Motion
• Mesh Line - Draw thick lines ^{★ 1, pushed 133 days ago}
• Mouse Cursor - Use mouse as a direct pointer ^{★ 9, pushed 143 days ago}
• No-click Look Controls - Intuitive desktop view controls without requiring mousedown + drag ^{★ 18, pushed 235 days ago}
• Ocean - Flat-shaded ocean primitive and component, with animated waves
• Orbit Controls - Orbit camera around an entity
• Particle System - Particle systems (e.g., rain, dust, snow, fire)
• Physics + Vive Controls - grab and sphere-collider components for combining Vive controllers with aframe-extras.physics
• Physics - Rigid-body physics using Cannon.js
• 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
• Randomizer - Set random values ^{★ 2, pushed 135 days ago}
• Selectable by @scenevr - Click on an entity to select it, handy for editors ^{★ 2, pushed 174 days ago}
• Shadows - Realtime shadows
• 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) ^{★ 13, pushed 146 days ago}
• Template - Integration with Handlebars, Jade, mustache, Nunjucks JS template engines ^{★ 4, pushed 129 days ago}
• Text Wrap - Wrapping text dynamically rendered onto the draw component ^{★ 10, pushed 166 days ago}
• Text - Polygonal text ^{★ 21, pushed 163 days ago}
• THREE Loader - Model loader for .json models, wrapping THREE.JSONLoader and THREE.ObjectLoader
• Tube - Cylindrical primitive that shapes itself to a given path
• UI Modal - Show dialog box or a menu in front of the camera
• 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 HTC Vive controllers
• WebVR Controller - HTC Vive controllers
• Look At and Billboard - Component to tell an entity to face another entity, or to face the camera.
• Animation - New and improved animation system using components. [[Code](https://github.com/ngokevin/aframe-animation-component)]
• ChartBuilder - A component for using ChartBuilder charts.
• Stereo Cube - A component for stereo cubemap textures (i.e., left and right eye textures).
• Trigger Box - A component that emits an event when it enters or leaves a predefined area.
• L-System - A component for rendering Lindenmayer systems.
• Terrain Model - Generating terrains using TerrainLoader
• Orbit Controls Component - Allow desktop users to rotate the camera around an object.
• Sprite Component - Creates bitmap images that always face the camera.

Materials

• Draw - Render from canvas ^{★ 1, pushed 140 days ago}
• HTML - Render from HTML ^{★ 3, pushed 131 days ago}
• Video - iOS-compatible video material ^{★ 2, pushed 140 days ago}
• GIF - Render animated GIFs ^{★ 0, pushed 140 days ago}

Integration

Integration with existing tools, frameworks, and libraries.

• aframe-jade-boilerplate - A-Frame with the Jade templating engine ^{★ 1, pushed 269 days ago}
• aframe-role - A-Frame with Popmotion for animations, physics, and input tracking ^{★ 6, pushed 259 days ago}
• D3.js - A-Frame with D3.js [Video Tutorial]
• 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 ^{★ 0, pushed 160 days ago}
• SpineFrame - Component for 2D sprite animation with Spine
• Meteor - A-Frame with Meteor , a JavaScript app framework ^{★ 2, pushed 160 days ago}
• Altspace - Integration with AltspaceVR ^{★ 8, pushed 131 days ago}
• IdeaSpace - IdeaSpace CMS for the virtual reality web ^{★ 79, pushed 129 days ago}
• Angular 2 Boilerplate - An environment for developing WebVR apps with Angular 2 with A-Frame.
• Drupal - Drupal module for integration with A-Frame.
• Mixin Style Sheets - CSS-like stylesheets for A-Frame for declaring mixins. [[Code](https://github.com/ngokevin/aframe-mss)]

React

Use React with A-Frame. Share your A-Frame React Components!

• aframe-react ^{★ 114, pushed 143 days ago}
• aframe-react-boilerplate (with Webpack) ^{★ 49, pushed 163 days ago}
• aframe-react-starter ^{★ 12, pushed 258 days ago}
• React + Redux Demo (including switching between 2D and 3D) ^{★ 37, pushed 206 days ago}
• React + TweenMax Demo
• React Redux Boilerplate - Combining React, Redux, React Router, A-Frame and Webpack

Scenes

• a-invaders - Space invaders game [Code]
• a-wakens - Star Wars Audio Visualization [Code]
• VR Website Navigation
• Tron-Inspired VR Website Experience
• Minecraft-Inspired VR Website Experience
• Movie Theater
• EEVO - 360-degree image with transitions
• Hershey Sweet Lights - Holiday scene [Code]
• MeetupVR - Switching interaction between 2D and 3D [Code] [Post]
• Ricoh Theta S Live Preview - Live video preview with the Ricoh Theta S [Code]
• threeschwifty - 360-degree photo and video viewer [Code]
• VR GIF - GIFs in VR [Post]
• Virtual Art School Tour - Tour of the Stamps School of Art & Design , built using 360-degree photos with a navigation carousel
• 360-Degree Photosphere Viewer - 360-degree photo viewer with navigation [Code]
• Space-themed E-commerce Store
• Tunnel Ride
• Wheel Ride
• Equalizer Ride
• Test Scape
• INFIVERSE Navigate a collection of cool A-Frame sites by walking through rooms and doorways
• Cardboard Dungeon - A first-person dungeon crawler designed for mobile [Code]
• Cardboard Treasure Hunt - An A-Frame implementation of the ">Google Cardboard "Treasure Hunt" demo [Code]
• Concert Hall 360° - 360° view of an empty concert hall with Vivaldi’s The Four Seasons playing in the background [Code]
• Where in the World Is Carmen Sandiego? - A scavenger hunt game inspired by the popular series [Code]
• Monument - Monument Valley scene exported from MagicaVoxel [Code]
• Drop - Look down and free-fall
• Minecraft Viewer Boilerplate - Boilerplate for viewing Minecraft - esque scenes [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]
• GadgetPlus VR Online Store - Shop in VR for electronics and gifts
• Lullabot - VR teaser page for Lullabot , an interactive strategy, design, and development company ( P.S. meet the team )
• Random Forest Treasure Hunt - Can you find the red cube? Randomly generated forest built with Handlebars template
• E-commerce Spy Store - Black & white environment with fire
• E-commerce Gallery - Product gallery in a large well-lit building
• Living Room - Watch TV from your luxurious living room by the beach
• Alien Abduction - Alien Abduction demo
• Hello VR - Moody dark scene with cool shadows, reflections, and animated clouds
• 32Studios Lounge - Enjoy a lounge with coffee machines, laptops, and VR headsets while grooving to SoundCloud
• 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
• Subreddit gallery - View subreddits as virtual galleries
• 360 Syria - View the devastation of barrel bombs in Aleppo, Syria. Created in partnership with AllJunior and Amnesty International UK
• PerspecTV VR Player - 360-video VR player that allows you to view any 360-video from the web. Compatible with mobile
• Escape Game - Can you escape?
• Escape Game 2: The Game - Can you escape again?
• Tron World - Carpet Ride
• OverWater - SkyIslands VR piece.
• Voxel Castle - Castle created with MagicaVoxel and baked in Blender
• Monument Valley Castle - Another castle created with MagicaVoxel and baked in Blender
• Lava Cave Game - Don't touch the lava
• Castle Game - Hidden doors and gems
• Electrocat - Groove to Topanga's music
• Island - Voxel-based island in the ocean
• Purple Rain - Prince tribute
• Green Laser Pointer Store - Shop for lasers
• Tiny Hands for Trump - Donald Trump parody
• Starfox - Fly through a Starfox-themed space
• Moon Bowling - Bowling in space with moons
• Moss March - SkyIslandsVR piece on a foggy swamp
• Space Blob Towers - SkyIslandsVR piece on a pointy alien world
• Carnival Globe Trees - SkyIslandsVR piece with globe-shaped trees
• A-Brush - Doodle in 3D space with WASD and Cardboard cursor
• HelloWorldVR - Stonehenge after dark
• May the 4th Be With You - Star Wars
• Pirate - Cannon balls, knocking down blocks
• Mini Golf - 9 Holes
• Welcome to A-Frame - Quick introduction to A-Frame
• Photo Sphere Diver - Dive into your photo spheres
• Sketch VR - Doodle on paper, take a picture, and view it in VR [Code]
• Celestial Dancers - An orbital mechanics simulation of celestial bodies
• Dark Lotus - Lotus flowers on churning water
• Aquila VR - Mapping of the universe using actual star data
• Plink - Can you make it into the middle slot?
• Foosball - Everyone's second favorite tabletop game, with physics
• Redwood Dusk - Meditate under nature's giants
• Womynography - An immersive map-based archive of urban women's experiences in Cairo
• EVA - Prototype mecha in lava
• Space Shark Room - Hinduist shark cage in space
• Metal Gear REX - Return to Shadow Moses. SNAKE!
• Meditation Orbs - A place to meditate
• Welcome - To A-Frame
• 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? - D3 data visualization
• First Citdael - Citadel with flowing waterfalls
• 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 .
• A-Frame AR - Experimenting with AR using A-Frame and getUserMedia.
• Outside Lands VR - VR preview of the San Francisco Outside Lands music festival.
• Home/Hope )- Narrated journalism piece about humanitarian work in South Sudan. Featured on Italy’s top news site.
• RunJumpDevSlides - Virtual slidedeck for an A-Frame talk at RunJumpDev.
• Multiplayer Tic Tac Toe - Prototype of networked Vives playing Tic Tac Toe. [[Video](https://www.youtube.com/watch?v=vGjIWwozOU4)]
• 30 Days of WebVR - One order of A-Frame and WebVR per day, all on CodePen.
• Dominoes - Demonstration of HTC Vive with physics using dominoes. [[Code](https://github.com/bryik/aframe-dominoes/blob/master/index.html), [Video](https://www.youtube.com/watch?v=gU-P-56kAnI)]
• Ball Throw - Throw balls at blocks using Vive controllers and Don McCurdy's physics. [[Code](https://github.com/bryik/aframe-ball-throw)]
• Lyrics VR - Watch lyrics fly past you in time with the music. [[Code](https://github.com/gurumukhi/vr-ram/tree/gh-pages/demos/lyricsVR)]
• Rubik's Cube - Spinning Rubik’s Cube featuring a multicolored-cube component.[[Code](https://github.com/tushararora/tushararora.github.io/tree/master/rubiks-cube)]
• 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.
• A-Frame Statistics Dashboard - d3.js calendar heatmap of A-Frame GitHub Stargazers per day.
• Pokemon Stadium - Face off against Charizard on the Pokemon Stadium.
• 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](https://github.com/nprapps/rockymountain)]
• MagicaVoxel: A-Frame - A-Frame in MagicaVoxel in A-Frame.
• Earth Rover - Controlling a physical robot from outer space using Intel Edison and Leap Motion.
• Imagined Reality - Stereoscopic cubemaps, taken from winners of OTOY’s Render the Metaverse context.
• Star Crossed - Piano and stars.
• Vive Starter - Simple boilerplate for a Vive project using the third-party aframe-webvr-controller component.
• Procedural Forest - A procedural forest with procedural trees using the L-System Component .
• MagicaVoxel: City - A city built using MagicaVoxel . [[Tutorial](https://github.com/ngokevin/aframe-magicavoxel-projects#tutorial)]
• Sad Island - An island in the sea. Strangely you feel like you are being watched.
• iStaging LiveTour - 360°ree; real estate tours with a neat mini-map.
• Tanks - A multiplayer tank game. [[Code](https://github.com/ourvrisrealerthanyours/tanks)]
• 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](https://github.com/armthethinker/webVR-experiments)]
• SFMTA Van Ness BRT Model - Model of the new Bus Rapid Transit project in San Francisco.
• Virtual Reality Music Player - WebVR music player in space using the Spotify API. [[Code](https://github.com/sebscholl/koo-WebVR)]
• Weather Room - What’s the forecast for WebVR? Sunny with no chance of rain. [[Code](https://github.com/sebscholl/weatherroom)]
• CinemVR Design Prototype - Design prototype of a VR cinema.
• Insurance World - Insurance in suburbia.
• 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.
• FireFrame - Multiuser experiment using Firebase for synchronizing users connected to the same A-Frame scene.
• Kinect Scans - Students 3D-scanned with Xbox Kinect sensors and exported to .OBJ models. The winning project at University of Michigan’s Makeathon 2016.
• Zenspot - Relaxing nature experiences with soothing music.
• World - Explore 360° photos using globe navigation.
• Matrix - Jump and push around raining blocks in the Matrix.
• Force Push - Become a block bender.
• SpaceTrek - Explore 360° videos of space and atmosphere.
• Firebase Presentation - A multiuser demo scene for the SFHTML5 presentation.
• PoopVR - Life-altering possibilities of VR at the San Francisco Stupid Hackathon.
• Low Nausea FPS Locomotion - Locomotion prototype for using 6DoF controllers (e.g., Vive) to grab and swing through scenes.
• WebVR Soccer Stadium Complex - Watch several video feeds at once in a soccer stadium. [[Code](https://github.com/cassell/webvr-soccer-stadium-multiplex)]
• Trident - Code experiment with cursor events in d3.js
• VR Inception School - Learn a bit about WebVR in WebVR.
• RCS Gallery - Gallery of father’s photographs.
• GuriVR - Create sharable VR scenes using natural language and zero code. [[Code](https://github.com/opennewslabs/guri-vr)]
• 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](https://github.com/SamsungInternet/a-frame-demos/blob/gh-pages/racer/index.html)]
• 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](https://github.com/Miradas360/miradas360-01)]
• 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.
• Olympic Rings - A-Frame gets the gold at Rio 2016.
• Covo - Architectural visualization with baked global illumination.
• Humanity - Day 8 of Dave’s 30 Days of WebVR.

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

License