A collection of awesome things regarding A-Frame, the WebVR framework.
Straight from the horse's mouth.
Find human beings using A-Frame.
Learn about A-Frame.
- 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 (by @daoshengmu)
- Build the Virtual Reality Web with A-Frame - Slides from talk at ForwardJS (by @ngokevin)
- 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
<a-entity>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 a Virtual Reality Web Experience (by Josh Carpenter) - A sneak peek of A-Frame before it was released
- A Review of Mozilla's A-Frame WebVR Framework (by AR/VR Magazine)
- Responsive Web Design with A-Frame (by @alexrkass)
- Using A-Frame with Epson Moverio and Crosswalk (by Pablo Mendigochea) - 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
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
Third-party components (of the entity-component-system pattern).
- Component Boilerplate - Boilerplate for creating and sharing A-Frame VR components
- aframe-extras - Don's collection of A-Frame components
- k-frame - Kevin's collection of A-Frame components
- Along Path - Interpolating an entity's position along a path
- Asset Lazy Load - Assign asset loading order and delays
- Audio Visualizer - Audio visualizations using WebAudio API
- Broadcast - Multiuser with WebSockets
- 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
- 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
- Extrude and Lathe - Extrude and lathe geometries
- FPS Look - Facilitates controlling entity rotation directly with captured mouse
- 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
- GIF - Display GIF as a texture by using a Canvas
- Gamepad Controls - Gamepad controls using HTML5 Gamepad API
- Grid Helper - Create customizable grids
- 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
- Layout - 3D layout of child entities
- Mesh Line - Draw thick lines
- Mouse Cursor - Use mouse as a direct pointer
- No-click Look Controls - Intuitive desktop view controls without requiring mousedown + drag
- OBJ and MTL Loader - Loader for .OBJ models and .MTL materials
- Ocean - Flat-shaded ocean primitive and component, with animated waves
- Orbit Controls - Orbit camera around an entity
- Physics - Rigid-body physics
- Polygon - n-sided polygons
- Proxy Controls - Connect input devices from your desktop to your mobile phone with WebRTC
- Randomizer - Set random values
- Selectable by @scenevr- Click on an entity to select it, handy for editors
- 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)
- Template - Integration with Handlebars, Jade, mustache, Nunjucks JS template engines
- Text Wrap - Wrapping text dynamically rendered onto the
drawcomponent - Text - Polygonal text
- 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, touch alongside physics
- [Video Controls] (https://github.com/oscarmarinmiro/aframe-video-controls) - Video controls (play/pause/jump) for A-Frame video assets
- Faceset - Geometry from vertices and faces
- glTF - glTF models
- Checkpoint Controls - Eased linear locomotion
- Height Grid - Terrain
- Leap Hands - Leap Motion
- Particle System - Particle systems (e.g., rain, dust, snow, fire)
- WebVR Controller - HTC Vive controllers
- Keyboard - Full VR keyboard for use with WebVR controllers
- Bmfont - Renders bitmap/SDF fonts for high-quality 2D text
- 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-jade-boilerplate - A-Frame with the Jade templating engine
- aframe-role - A-Frame with Popmotion for animations, physics, and input tracking
- D3.js - A-Frame with D3.js [Video Tutorial]
- Vue.js + TweenMax demo (by @cheapsteak) - 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
- IdeaSpace - IdeaSpace CMS for the virtual reality web
Use React with A-Frame. Share your A-Frame React Components!
- aframe-react
- aframe-react-boilerplate (with Webpack)
- aframe-react-starter
- React + Redux Demo (including switching between 2D and 3D)
- React + TweenMax Demo (by @cheapsteak)
- a-invaders - Space invaders game [Code]
- a-wakens - Star Wars Audio Visualization [Code]
- VR Website Navigation (by @drawvr)
- Tron-Inspired VR Website Experience (by @drawvr)
- Minecraft-Inspired VR Website Experience (by @drawvr)
- Movie Theater (by @drawvr)
- 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 (by @withersc) - 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 (by @drawvr)
- Tunnel Ride (by @drawvr)
- Wheel Ride (by @drawvr)
- Equalizer Ride (by @drawvr)
- Test Scape (by Michael Verdi)
- INFIVERSE (by @drawvr) Navigate a collection of cool A-Frame sites by walking through rooms and doorways
- Cardboard Dungeon (by Christopher Waite) - A first-person dungeon crawler designed for mobile [Code]
- Cardboard Treasure Hunt (by Michael Straeubig) - An A-Frame implementation of the Google Cardboard "Treasure Hunt" demo [Code]
- Concert Hall 360° (by @ybinstock) - 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? (by @ybinstock) - A scavenger hunt game inspired by the popular series [Code]
- Monument - Monument Valley scene exported from MagicaVoxel [Code]
- Drop (by @drawvr) - 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 (by @drawvr)
- 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 (by @drawvr)
- E-commerce Gallery - Product gallery in a large well-lit building (by @drawvr)
- Living Room - Watch TV from your luxurious living room by the beach (by @drawvr)
- Alien Abduction (by Gabriel de Diego, Bruno Diaz, Joshua Ovieda and Jose-Rafael Diaz) - Alien Abduction demo
- Hello VR (by @PIXELZ) - 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 (by @scenevr)
- 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? (by @drawvr)
- Escape Game 2: The Game - Can you escape again? (by @drawvr)
- Tron World - Carpet Ride (by alexoviedo999)
- 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 (by @drawvr)
- Castle Game (by @drawvr) - 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 (by @drawvr) - Cannon balls, knocking down blocks
- Mini Golf (by @drawvr) - 9 Holes
- Welcome to A-Frame (by @drawvr) - Quick introduction to A-Frame
- Photo Sphere Diver (by IdeaSpace) - Dive into your photo spheres
- Sketch VR (by @uniformfutures) - 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 (by @h0r0man) - 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.
Contributions and suggestions are very welcome. Check out the guidelines and make a pull request.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent