A-Frame Virtual Reality Framework
A-Frame is an open-source web framework for building virtual reality (VR) experiences. A-Frame is an entity component system framework for Three.js where developers can create 3D and WebVR scenes using HTML. HTML provides a familiar authoring tool for web developers and designers while incorporating a popular game development pattern used by engines such as Unity.
Official Resources
Community
Learning
- Minecraft in WebVR with HTML Using A-Frame * Tutorial on creating a Minecraft-like scene in WebVR
- 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 - 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
- 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
- Getting Started with Virtual Reality on the Web — Ada Rose Edwards * Talk at London Web Perf 2017 with a live multiuser demo
- 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
Components
- 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)
- Asset Lazy Load * Assign asset loading order and delays
- Asset On-Demand * Load Assets dynamically when needed (and properly clean them up if not)
- 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 - Effects System * A VR-ready post-processing framework for A-Frame
- 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
- 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
- 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 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.
- Polygon *
n-sided polygons - 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)
- 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
Materials
- Draw * Render from canvas
- HTML * Render from HTML
- Video * iOS-compatible video material
- GIF * Render animated GIFs
Integration
- 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
- SpineFrame * Component for 2D sprite animation with Spine
- Altspace * Integration with AltspaceVR
- Mixin Style Sheets * CSS-like stylesheets for A-Frame for declaring mixins [Code]
- 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
Scenes
- 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]
- 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]
- 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
- SkyIslands VR * Strange virtual landscapes
- 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!
- 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
- Multiplayer Tic-tac-toe * Prototype of networked Vives playing Tic-tac-toe. Video
- Rubik's Cube * Spinning Rubik's Cube featuring a multicolored-cube component. [Code]
- 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 OTOYs Render the Metaverse contest
- 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
- 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 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
Tools
