A collection of awesome things regarding A-Frame VR. Easily build WebVR experiences.
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
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 A-Frame components (of the entity-component-system pattern).
- Component Boilerplate - Boilerplate for creating and sharing A-Frame VR components
- Along Path - Interpolating an entity's position along a path
- Extrude and Lathe - Extrude and lathe geometries
- FPS Look - Facilitates controlling entity rotation directly with captured mouse
- Gamepad Controls - Gamepad controls using HTML5 Gamepad API
- Layout - 3D layout of child entities
- No-click Look Controls - Intuitive desktop view controls without requiring mousedown + drag
- OBJ and MTL Loader - Loader for .OBJ models and .MTL materials
- Physics - Rigid-body physics
- Proxy Controls - Connect input devices from your desktop to your mobile phone with WebRTC
- Text - Polygonal text
- Collider, Explode, Spawner - Collection of components for collision, geometry explosions, and entity spawning
- Asset Lazy Load - Assign asset loading order and delays
- Draw - HTML5
<canvas>as a material texture, with support for extension components - Text Wrap - Wrapping text dynamically rendered onto the
drawcomponent - Template - Integration with Handlebars, Jade, mustache, Nunjucks JS template engines
- Stereo - Enable rendering different entities for each eye, using THREE.js layers so you can render 3D stereoscopic videos (full and half-dome)
- GIF - Display GIF as a texture by using a Canvas
- Interpolation - Interpolate positional and rotational updates for entities, useful for fetching from server for multiplayer
- HTML Texture - Using HTML as a texture, powered by html2canvas
- Selectable by @scenevr- Click on an entity to select it, handy for editors
- Orbit Controls - Orbit camera around an entity
- Universal Controls - Refactored A-Frame controls that supports gamepad, HMD, keyboard, mouse, touch alongside physics
- Randomizer - Set random values
- Mesh Line - Draw thick lines
- Fence - Set boundaries on entity position
- Mouse Cursor - Use mouse as a direct pointer
- Drag Look - Look controls in the opposite direction with changing cursor style
- Grid Helper - Helper to add customizable grids to your scene, useful for editors
- Ocean - Flat-shaded ocean primitive and component, with animated waves
- Fit Texture - Automatically scale entities relative to their texture, so you don't need to set width/height manually
- Audio Visualizer - Audio visualizations using dancer.js
- Grid Helper - Create customizable grids
- Entity Generator - Generate entities
- href - Link to other pages using cursor component
- UI Modal - Show dialog box or a menu in front of the camera
- 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
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